1 <form action="/login" method="post" id="form1">
2 <span>用户</span>
3 <input type="text" name="username" id="username"/><br/>
4 <span>密码</span>
5 <input type="password" name="password" id="passsword"/><br/>
6
7 <input type="submit" value="提交">
9 </form>
说明:
js校验:
在from属性后面接着添加onsubmit="return false;"属性.表示不提交。true则相反。这里可以用一个方法替换。变成:
<form action="/back/login/login" method="post" id="form1" onsubmit="return sb1();">
然后,书写js验证规则:
1 function sb1(){
2 var username = document.getElementById("username");
3 var password = document.getElementById("passsword");
4 if(trim(username.value)==null || trim(username.value)==""){
5 alert("请输入用户名");
6 username.focus();
7 return false;
8 }
9 if(trim(password.value)==null || trim(password.value)==""){
10 alert("请输入密码");
11 password.focus();
12 return false;
13 }
14
15 return true;
16 }
17 function trim(str){ //删除左右两端的空格
18 return str.replace(/(^\s*)|(\s*$)/g, "");
19 }
js含义:
首先,表单元素代码如下:
1 <form action="/back/login/login" method="post" id="form1">
2 <span>用户</span>
3 <input type="text" name="username" id="username"/><br/>
5 <span>密码</span>
6 <input type="password" name="password" id="passsword"/><br/>
8
9 <a href="javascript:sb();">提交</a>
10 </form>
这里关于提交,页面切图通常都会用a标签或者button来提交,因为涉及到表单验证。
同样,js:
1 function sb(){
2 var username = document.getElementById("username");
3 var password = document.getElementById("passsword");
4 if(trim(username.value)==null || trim(username.value)==""){
5 alert("请输入用户名");
6 username.focus();
7 return;
8 }
9 if(trim(password.value)==null || trim(password.value)==""){
10 alert("请输入密码");
11 password.focus();
12 return;
13 }
14
15 form1.submit();
16
17 }
js含义: