基于jquery 表单验证插件Validation的应用

JQuery

1个成员

基于jquery 表单验证插件Validation的应用

发表于 2016-12-28 • 3360 次查看

文章详细的讲解了基于jquery 表单验证插件Validation的应用方法，如果有不懂的朋友可以联系我哦，我可以给你完整实例，好了有需要的朋友可以参考下。

Validation，现在结合实际情况，我把项目中经常要用到的验证整理成一个实例DEMO，本文就是通过讲解这个实例来理解Validation的应用。

代码如下	复制代码
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script>

准备CSS样式

页面样式我不再详述，大家可以自己写个样式，也可以参看DEMO的页面源代码。这里要强调的关键样式是要显示验证信息的样式

代码如下	复制代码
label.error{color:#ea5200; margin-left:4px; padding:0px 20px; background:url(images/unchecked.gif) no-repeat 2px 0 } label.right{margin-left:4px; padding-left:20px; background: url(images/checked.gif) no-repeat 2px 0}

XHTML

代码如下

复制代码

<form id="myform" action="#" method="post">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable">
<tr class="table_title">
    <td colspan="2">jquery.validation 表单验证</td>
</tr>
<tr>
    <td width="22%" align="right">用户名：</td>
    <td><input type="text" name="user" id="user" class="input required" />
    <p>用户名为3-16个字符，可以为数字、字母、下划线以及中文</p></td>
</tr>
<tr>
    <td align="right">密码：</td>
    <td><input type="password" name="pass" id="pass" class="input required" />
    <p>最小长度:6 最大长度:16</p>
    </td>
</tr>
<tr>
    <td align="right">确认密码：</td>
    <td><input type="password" name="repass" class="input required" /></td>
</tr>
</table>
</form>

限于篇幅，本文的只截取了实例中HTML代码的一小部分，详细XHTML代码可参看页面DEMO源代码。值得一提的是，我在给了标签一个“required”类样式，下文将会提到它的作用。

4、应用Validation插件

调用Validation插件的方法：

代码如下	复制代码
$(function(){ var validate = $("#myform").validate({ rules:{ //定义验证规则 ...... }, messages:{ //定义提示信息 ...... } }) });

rules:定义验证规则，key:value的形式，key是要验证的元素,value可以是字符串或对象。比如验证用户名的长度和不允许为空：

代码如下	复制代码
rules:{ user:{ required:true, maxlength:16, minlength:3 }, ...... }

其实我们在XHTML代码中可以直接指定input的class属性为required，作用是不允许为空，这样在JS部分就不用重复写了。同样的验证email等，直接设置input的class属性为email。

messages:定义提示信息，key:value的形式key是要验证的元素,值是字符串或函数，当验证不通过时提示的信息。

代码如下	复制代码
messages:{ user:{ required:"用户名不能为空！", remote:"该用户名已存在，请换个其他的用户名！" }, ...... }

本例中涉及的验证JS就是按照上面的规则进行编写的，Validation插件封装了好多基本的验证方式，如下：

required:true 必须有值，不能为空
remote:url 可以用于判断用户名等是否已经存在,服务器端输出true,表示验证通过
minlength:6 最小长度为6
maxlength:16 最大长度为16
rangelength:长度范围
range:[10,20] 数值范围在10-20之间
email:true 验证邮件
url:true 验证URL网址
dateISO:true 验证日期格式'yyyy-mm-dd'
digits:true 只能为数字
accept:'gif|jpg' 只接受gif或jpg为后缀的图片。常用于验证文件的扩展名
equalTo:'#pass' 与哪个表单字段的值相等，常用于验证重复输入密码

此外，我还根据项目实际情况扩展了几个验证，验证的代码在validate-ex.js，使用前需要先加载这个JS。它能提供以下验证：

userName:true 用户名只能包括中文字、英文字母、数字和下划线
isMobile:true 手机号码验证
isPhone:true 大陆手机号码验证
isZipCode:true 邮政编码验证
isIdCardNo:true 大陆身份证号码验证
ip:true IP地址验证

完整实例

代码如下

复制代码

label.error{color:#ea5200; margin-left:4px; padding:0px 20px; background:url(Images/unchecked.gif) no-repeat 2px 0 }
label.right{margin-left:4px; padding-left:20px; background:url(Images/checked.gif) no-repeat 2px 0}
</style>
<script type="text/javascript" src="../Script/jquery.js"></script>
<script type="text/javascript" src="./Script/jquery.validate.js"></script>
<script type="text/javascript" src="./Script/validate-ex.js"></script>
<script type="text/javascript">
$(function(){
var validate = $("#myform").validate({
  rules:{
   user:{
    maxlength:16,
    minlength:3,
    userName:true,
    remote: {
                   url: "chk_user.php",
                   type: "post",
                   data: { user: function() { return encodeURIComponent($("#user").val());}}
               }
   },
   pass:{
    maxlength:16,
    minlength:6
   },
   repass:{
    maxlength:16,
    minlength:6,
    equalTo:"#pass"
   },
   sex:"required",
   email:{email:true},
   tel:{isTel:true},
   phone:{isMobile:true},
   url:{url:true},
   birthday:"dateISO",
   years:{
    digits:true,
    range:[1,40]
   },
   idcard:"isIdCardNo",
   zipcode:"isZipCode",
   photo:{
    accept:"gif|jpg|png"
   },
   serverIP:"ip",
   captcha:{
    remote:"process.php"
   }
  },
  messages:{
   user:{
    remote:"该用户名已存在，请换个其他的用户名！"
   },
   repass:{
    equalTo:"两次密码输入不一致！"
   },
   sex:"请选择性别！",
   birthday:{
    dateISO:"日期格式不对!"
   },
   years:{
    number:"工作年限必须为数字！"
   },
   address:"请选择地区",
   photo:{
    accept:"头像图片格式不对！"
   },
   captcha:{
    remote:"验证码错误！"
   },
   low:" "
  },
  errorPlacement: function(error, element) {
   if ( element.is(":radio") )
    error.appendTo ( element.parent() );
   else if ( element.is(":checkbox") )
    error.appendTo ( element.parent() );
   else if ( element.is("input[name=captcha]") )
    error.appendTo ( element.parent() );
   else
    error.insertAfter(element);
  },
     success: function(label) {
     label.html(" ").addClass("right");
     }
});

$("#getcode").click(function(){
  $imgstr="getcode.php?randcode="+Math.random();
  $(this).attr("src",$imgstr);
});
$("input:reset").click(function(){
  validate.resetForm();
});
});
</script>
</head>

<body>

   <div class="demo">
<p>注：以下表单仅供学习和交流，Shuro's Blog网站不会记录用户输入的信息，请放心使用。</p>
<form id="myform" action="#" method="post">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable">
<tr class="table_title">
    <td colspan="2">jquery.validation 表单验证</td>
</tr>
<tr>
    <td width="22%" align="right">用户名：</td>
    <td><input type="text" name="user" id="user" class="input required" />
    <p>用户名为3-16个字符，可以为数字、字母、下划线以及中文</p></td>
</tr>
<tr>
    <td align="right">密码：</td>
    <td><input type="password" name="pass" id="pass" class="input required" />
    <p>最小长度:6 最大长度:16</p>
    </td>
</tr>
<tr>
    <td align="right">确认密码：</td>
    <td><input type="password" name="repass" class="input required" /></td>
</tr>
<tr>
    <td align="right">性别：</td>
    <td><input type="radio" name="sex" value="1" /> 男 <input type="radio" name="sex" value="0" /> 女</td>
</tr>
<tr>
    <td align="right">E-mail：</td>
    <td><input type="text" name="email" class="input required" /></td>
</tr>
<tr>
    <td align="right">固定电话：</td>
    <td><input type="text" name="tel" class="input required" />
    <p>格式如：021-12345678</p></td>
</tr>
<tr>
    <td align="right">手机号码：</td>
    <td><input type="text" name="phone" class="input required" /></td>
</tr>
<tr>
    <td align="right">网站：</td>
    <td><input type="text" name="url" class="input required" value="http://" /></td>
</tr>
<tr>
    <td align="right">出生日期：</td>
    <td><input type="text" name="birthday" class="input required" />
    <p>格式如：1990-10-01</p></td>
</tr>
<tr>
    <td align="right">工作年限：</td>
    <td><input type="text" name="years" class="input required" /></td>
</tr>
<tr>
    <td align="right">身份证号码：</td>
    <td><input type="text" name="idcard" class="input required" /></td>
</tr>
<tr>
    <td align="right">地区：</td>
    <td><select name="address" class="required">
      <option value="">请选择</option>
      <option value="1">北京市</option>
      <option value="2">上海市</option>
      <option value="3">广州市</option>
      <option value="4">深圳市</option>
    </select></td>
</tr>
<tr>
    <td align="right">邮政编码：</td>
    <td><input type="text" name="zipcode" class="input required" /></td>
</tr>
<tr>
    <td align="right">上传头像：</td>
    <td><input type="file" name="photo" class="required" />
    <p>头像为jpg,gif或者png格式的图片</p></td>
</tr>
<tr>
    <td align="right">服务器IP：</td>
    <td><input type="text" name="serverIP" class="input required" /></td>
</tr>
<tr>
    <td align="right"> </td>
    <td><input type="checkbox" name="low" class="required" /> 我已阅读并接受用户协议
    </td>
</tr>
<tr>
    <td align="right">验证码：</td>
    <td><input type="text" name="captcha" class="input required" style="width:80px;" />
    <img src="getcode.php" id="getcode" alt="看不清，点击换一张" align="absmiddle" style="cursor:pointer" />
    </td>
</tr>
<tr>
    <td height="42"> </td>
    <td><input type="submit" class="btn" value="提交" />   <input type="reset" class="btn" value="重置" /></td>
</tr>
</table>
</form>
</div>
</div>