如何使用jquery validation验证表单？

来源：www.45fan.com 2017-01-10 16:22:20

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:{
 字段名:{
  校验器:"提示",
  校验器:"提示",...
 }
 字段名:{
  校验器:"提示",
  校验器:"提示",...
 }
}

校验器取值

如何使用jquery validation验证表单？

案例

<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 validation验证表单？

推荐阅读