jQuery Validate插件实现表单强大的验证功能

转自：http://www.jb51.net/article/76595.htm

 

jQuery Validate插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

第一节：jQuery Validation让验证变得如此容易

一、官网下载jquery，和jquery validation plugin 
二、引入文件

<script src= "js/jquery-1.8.0.min.js"  type= "text/javascript" ></script> 

<script src= "js/jquery.validate.js"  type= "text/javascript" ></script>

三、接下来,声明下面的HTML片段

< form action = "" id = "jvForm" >

  姓名:< input type = "text" name = "username" id = "username" class = "required" /></ br >

  密码:< input type = "password" name = "password" id = "password" class = "required" /></ br >

  < input type = "submit" value = "提交" />

</ form >

通过以上代码，大家会发现我们对于每一个input都加上了class="required" 
他的作用就是在这个inpute标签为空时会提示用户出错。

四、最后我们要为我们的框架找到一个切入点

<script type= "text/javascript" >

  $( function () {

   $( "#jvForm" ).validate();

  })

</script>

运行效果：

当然提示信息默认是英文的，可根据需要在jquery.validate.js里修改。

 

第二节：jQuery Validation让验证变得如此容易

上一个例子我们是统一引用jquery.validate.js这样所有必填字段的提示信息都将是This field is required.
现在要改成动态提示，比如姓名如果为空则提示姓名不能为空，密码如果为空则提示密码不能为空。
这次我们将校验规则写在代码里
首先还是先引入文件

<script src= "js/jquery-1.8.0.min.js" type= "text/javascript" ></script>

<script src= "js/jquery.validate.js" type= "text/javascript" ></script>

接下来,声明下面的HTML片段

< form action = "" id = "jvForm" >

  姓名:< input type = "text" name = "username" id = "username" /></ br >

  密码:< input type = "password" name = "password" id = "password" /></ br >

  < input type = "submit" value = "提交" />

</ form >

和之前的相比没有了class="required"
最后 校验规则如下：

$( function () {

  $( "#jvForm" ).validate({

   rules: {

    username: {

     required: true

    },

    password: {

     required: true

    }

   },

   messages: {

    username: {

     required: "姓名不能为空!"

    },

    password: {

     required: "密码不能为空!"

    }

   }

  });

})

 运行效果：

第三节：jQuery Validation让验证变得如此容易

以下代码进行对jQuery Validation的简单演示包括必填项、字符长度，格式验证

一、引入文件

<script src= "js/jquery-1.8.0.min.js" type= "text/javascript" ></script>

<script src= "js/jquery.validate.js" type= "text/javascript" ></script>

二、声明HTML片段

< form action = "" id = "jvForm" >

   用 户 名:< input type = "text" name = "username" /></ br >

   密 码:< input type = "password" name = "password" id = "password" /></ br >

   确认密码:< input type = "password" name = "confirm_password" /></ br >

   出 生 地:< select name = "address" >< option value = "" >--</ option >< option value = "1" >北京</ option >

  < option value = "1" >上海</ option >< option value = "1" >深圳</ option ></ select ></ br >

   手 机:< input type = "text" name = "mobile" /></ br >

   邮 箱:< input type = "text" name = "email" /></ br >

   < input type = "submit" value = "提交" />

</ form >

三、错误提示样式

<style type= "text/css" >

  label.error{ font-size : 12px ; font-weight : normal ; color : #ff0511 ; margin-left : 10px ;}

</style>

四、验证代码

<script type = "text/javascript" >

$( function () {

  $( "#jvForm" ).validate({

   rules: {

    username: { //用户名必填 至少3位

     required: true ,

     minlength: 3

    },

    password: { //密码必填 至少6位

     required: true ,

     minlength: 6

    },

    confirm_password: { //密码确认

     required: true ,

     equalTo: "#password"

    },

    address: { //出生地必填

     required: true

    },

    mobile: { //手机必填 验证格式

     required: true ,

     mobile: true

    },

    email: { //email必填 验证格式

     required: true ,

     email: true

    },

  

   },

   messages: {

    username: {

     required: "用户名不能为空!" ,

     minlength: "用户名至少三位!"

    },

    password: {

     required: "密码不能为空!" ,

     minlength: "密码至少六位!"

    },

    confirm_password: {

     required: "密码确认不能为空!" ,

     equalTo: "两次输入密码不一致 !"

    },

    address: {

     required: "请选择出生地!" ,

    },

    mobile: {

     required: "手机不能为空!" ,

     mobile: "手机格式不正确" ,

    },

    email: {

     required: "邮箱不能为空!" ,

     email: "邮箱格式不正确" ,

    },

   }

  });

})

</script>

运行效果：

 

转载于:https://www.cnblogs.com/xiaohuihui123/p/5403604.html