表单验证

为了保证用户提交的信息都是正确的，保证系统的安全性，验证是必不可少的，验证一般分为两种方式。

客户端验证：直接在客户端执行JS进行验证，验证的过程中和服务器端没有任何的交互
服务器端验证：页面将验证信息传回服务器端，服务器端进行验证，并将验证的结果发送回客户端

这两个验证都是必须的，因为客户端的验证安全性不是太高，但是可以防止80%以上的用户的误操作，可以减轻服务器端的压力，而且速度非常快，用户体验高。不要以为有了客户端的验证就不需要了服务器端的了，客户端的验证是很容易绕过去的，服务器端验证安全性比较高，所以一般验证两个验证都需要写。

先看看下面这个注册界面，对用户的注册信息我们是有要求。不正确的信息是不会提交给后台服务器的。每一个控件我们都分别定义了对应的验证方法。

<table>

<tr>

<td><input type="text" name="username" id="username"

onblur="checkusername()" /></td>

</tr>

<tr>

<td><input type="password" name="pass" id="pass"

onblur="checkpass()" /></td>

</tr>

<tr>

<td><input type="password" name="pass2" id="pass2"

onblur="checkpass2()" /></td>

</tr>

<tr>

<td><input type="text" name="useremail" id="useremail"

onblur="checkuseremail()" /></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

实现验证验证方法：

function checkusername(){

var username=document.getElementById("username");

var usernameerror=document.getElementById("usernameerror");

var unamevalue=username.value;

if(unamevalue.length<6||unamevalue.length>20){

usernameerror.innerHTML="<font color='red'>用户格式不对</font>";

return false;

}else{

usernameerror.innerHTML="正确";

return true;

}

function checkpass(){

var pass=document.getElementById("pass");

var passerror=document.getElementById("passerror");

var passvalue=pass.value;

if(passvalue.length<6||passvalue.length>20){

passerror.innerHTML="<font color='red'>密码格式不对，必须介于6至20</font>";

return false;

}else{

passerror.innerHTML="正确";

return true;

}

function checkpass2(){

var pass=document.getElementById("pass");

var pass2=document.getElementById("pass2");

var pass2error=document.getElementById("pass2error");

var passvalue=pass.value;

var pass2value=pass2.value;

if(passvalue!=pass2value){

pass2error.innerHTML="<font color='red'>密码不一致</font>";

return false;

}else{

pass2error.innerHTML="正确";

return true;

}

function checkuseremail(){

var useremail=document.getElementById("useremail");

var useremailerror=document.getElementById("useremailerror");

var useremailvalue=useremail.value;

//[email protected]

//js /正则表达式/

var reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;

if(!reg.test(useremailvalue)){

useremailerror.innerHTML="<font color='red'>邮箱格式不对</font>";

return false;

}else{

useremailerror.innerHTML="正确";

return true;

}

</script>

现在只是验证提示，发现验证不过关还是网页还是会提交的，所以需要为这个form表单也绑定事件。

注意这里需要在onsubmit前面加上return。对应的js函数的实现

function formsub(){

if(checkusername()&checkpass()&checkpass2()&checkuseremail()){

return true;

}else{

return false;

}

效果如下：

Javascript（五）javascript实现表单验证

表单验证

猜你喜欢