表单验证-从js原生代码到Jquery validate

从事前端工作，表单验证是逃不掉了，小编这次给大家展示js原生代码的验证和是使用jquery框架的插件validate的验证..

首先我写了一个粗劣的表单...没有什么好看的样式在上面，大家见谅.....

表单代码如下...

<form action="http://www.hao123.com">
<h3>注册</h3>
账号:<input type="text" name="username" id="username" placeholder="请输入账号"/><br/>
密码:<input type="password" name="password" id="password" placeholder="请输入密码"/><br />
再次输入密码：<input type="password" name="varify_password" id="verify_password" placeholder="请再次输入密码"/><br />
手机号：<input type="text" name="phone" id="phone" placeholder="请输入您的手机号码"/><br />
email:<input type="text" name="email" id="eamil" placeholder="请输入您的电子邮箱"/><br />
<button type="button" id=“reg_btn”>提交</button>
</form>

效果如图：

下面编写我们的js验证代码....

$(function(){
$("#reg_btn").click(function(){
if(checkPassword()&&checkPhone()&&checkEmail()){
reg();
}
});
})




function checkPassword(){
var password = $("#password").val()
var verify_password = $("#verify_password").val();
if(password == ""){
alert("密码不能为空....");
return false;
}
if(password == verify_password){
return true;
}else{
alert("两次输入的密码不一致")
return false;
}
}


function checkPhone(){
var phone = $("#phone").val();
var regx =  /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
if(regx.test(phone)){
return true;
}else{
alert("请输入正确的手机号码..");
return false;
}
}


function checkEmail(){
var email = $("#email").val();
var regx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(regx.test(email)){
return true;
}else{
alert("请输入正确的电子邮箱...");
return false;
}
}


function reg(){
alert("终于等到你...")
}

写完之后验证一下（因为验证之后使用alert输出错误信息，所以小编就不一张一张的截图了，直接上一波结果图）

值得一提的是，表单验证的正则表达式是网上找来的，所以可能会出问题......

因为这样子做表单的验证效率很低，而且工作量很大，所以一般做表单的验证都是用jquery的validate插件进行....

小编这里用的是菜鸟教程上的cdn资源....

我们用validate插件的时候直接将表单的button改成提交按钮,还要给表单加上一个id哦，就是将上面的的html代码改成这样......

<form action="http://www.hao123.com" id=“reg_form”>
<h3>注册</h3>
账号:<input type="text" name="username" id="username" placeholder="请输入账号"/><br/>
密码:<input type="password" name="password" id="password" placeholder="请输入密码"/><br />
再次输入密码：<input type="password" name="varify_password" id="verify_password" placeholder="请再次输入密码"/><br />
手机号：<input type="text" name="phone" id="phone" placeholder="请输入您的手机号码"/><br />
email:<input type="text" name="email" id="email" placeholder="请输入您的电子邮箱"/><br />
<button type="submit" id="reg_btn">提交</button>
</form>

这个时候如果点击提交，页面是会跳转到hao123那边的，因为action=“http://www.hao123.com”,

这个时候就要开始隆重介绍我们的validate插件了，在我们的js文件中写以下代码...

$("#reg_form").validate({
debug:true
});

点击提交的时候就不会跳转到hao123页面，因为debug是调试模式，即便表单验证通过也不会提交表单....

现在我们就来用validate插件进行表单验证....js代码如下....

$(function(){
$("#reg_form").validate({
debug:true,
rules:{
username:{
required:true
},
password:{
required:true
},
verify_password:{
required:true,
equalTo:"#password"     //判断这个值是否跟“#password”相等....
},
phone:{
required:true,
},
email:{
required:true,
email:true                   //判断这个值是不是Email格式...
}
}
});
})

效果如图：

是不是觉得验证信息的样式有点奇怪呢，不慌张，这个是可以自定义的，还有验证信息的内容也是可以自定义的，

将上面的js代码改成

$(function(){
$("#reg_form").validate({
debug:true,
rules:{
username:{
required:true
},
password:{
required:true
},
verify_password:{
required:true,
equalTo:"#password"
},
phone:{
required:true,
},
email:{
required:true,
email:true
}
},
messages:{
username:{
required:"请输入用户名"
},
password:{
required:"请输入密码"
},
verify_password:{
required:"请再次输入密码",
equalTo:"两次输入的密码不一致"
},
phone:{
required:"请输入您的电话号码"
},
email:{
required:"请输入您的电子邮箱",
eamil:"邮箱格式不正确"
}
}
});
})

效果如图：