jquery validation验证表单插件

2019-11-19 18:05:27

字体：大中小

来源：转载

供稿：网友

jQuery验证表单插件――jquery-validation

The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy. ――官方介绍

validation使用步骤

引入jQuery库和validation插件

如果需要官方的国际化提示信息，可以导入相应的messages_xx.js库文件。
PS：下载地址：GitHub jzaefferer/jquery-validation

选中表单元素，显式调用验证方法

<script type="text/javascript">  $(function() {    $("#form").validate();  });</script>

书写验证规则和消息

<script type="text/javascript">  $(function() {    $("#form").validate({      rules:{},      messages:{}    });  });</script>

rules规则语法

rules:{
字段名:校验器,
字段名:校验器,...
}

校验器语法

校验器:值,
校验器:值,...

messages提示语法

message:{  字段名:{    校验器:"提示",    校验器:"提示",...  }  字段名:{    校验器:"提示",    校验器:"提示",...  }}

校验器取值

案例

<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script><script type="text/javascript" src="../../js/jquery.validate.min.js" ></script><script type="text/javascript" src="../../js/messages_zh.js" ></script><script>  $(function(){    $("#registForm").validate({      rules:{        user:{          required:true,          minlength:2        },        password:{          required:true,          digits:true,          minlength:6        },        repassword:{          required:true,          digits:true,          minlength:6,          equalTo:"[name='password']"        },        email:{          required:true,          email:true        },        username:{          required:true,          minlength:2        },        sex:{          required:true        }      },      messages:{        user:{          required:"用户名不能为空!",          minlength:"用户名不得少于2个字符!"        },        password:{          required:"密码不能为空!",          digits:"密码必须是数字!",          minlength:"密码长度不得低于6位!"        },        repassword:{          required:"确认密码不能为空!",          digits:"密码必须是数字!",          minlength:"密码长度不得低于6位!",          equalTo:"两次密码不一致!"        },        email:{          required:"邮箱不能为空!",          email:"邮箱格式不正确!"        },        username:{          required:"姓名不能为空!",          minlength:"姓名不得少于2个字符!"        },        sex:{          required:"性别必须勾选!"        }      },      errorElement: "label", //用来创建错误提示信息标签      success: function(label) { //验证成功后的执行的回调函数        //label指向上面那个错误提示信息标签label        label.text(" ") //清空错误提示消息          .addClass("success"); //加上自定义的success类      }    });  })</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：基于jquery二维码生成插件qrcode

下一篇：JQuery ZTree使用方法详解