标签：登录   car   更改   exclude   justify   back   table   sheet   styles   

简介：该插件是基于bootstrapvalidator.js进行修改编写的，写法类似，可兼容ie7+以上

一、使用方法

1.引用jQuery.js / jQValidator.js / jQValidator.css

<link href="css/jQValidator.css" rel="stylesheet" type="text/css"/>

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

<script type="text/javascript" src="js/jQValidator.min.js"></script>

2.编写HTML

<form class="global-form-box">

　　<div class="form-group">

　　　　<label class="control-label" for="tel"><i class="must">*</i>电话：</label>

　　　　<div class="form-group-cell">

　　　　　　<div class="frm-ctrl-box">

　　　　　　　　<input type="text" class="form-control" name="tel" id="tel"/>

　　　　　　　　<a class="frm-ctrl-clear"></a>

　　　　　　</div>

　　　　</div>

　　</div>

</form>

(1) 表单控件整体结构及class如上所示，如果不需要表单控件内容的删除按钮，可以去掉 “  frm-ctrl-box “ 和 ” frm-ctrl-clear ” 这两个结构，只需在 “ form-group-cell ” 里保留<input/>结构即可；

(2) class = “ form-group-cell ” 可以更改为 “ form-group-bd ” ，只限这两种。

3.编写css样式

可以根据设计稿的情况，在jQValidator.css直接修改相关样式或在自己的样式表中书写新的样式覆盖。

4.调取插件

<script type="text/javascript">

$(".global-form-box").jQValidator();

</script>

二、参数说明（具体可参考bootstrapValidator的参数设定）

三、验证规则

1. notEmpty：控件不能为空，必填项；

　　notEmpty: {

　　　　message: ‘请输入您的账号’

　　} 

2. stringLength：该控件字符个数， min为最小字符数，max为最大字符数；

　　stringLength: {

　　　　min: 4,

　　　　max: 8,

　　　　message: ‘字符长度需要在6-12字符间’

　　}

3. identical：该控件必须与某控件的值相同

　　identical: {

     　　   field: ‘password‘,

        　　message: ‘两次密码不一致‘

　　}

4. different: 该控件必须与某控件的值不同

　　different: {  

    　　   field: ‘account‘,//需要进行比较的input name值

      　　 message: ‘不能和账号相同‘

  　　 }

5. phone：电话验证规则，‘MB‘—移动电话，‘LD‘—座机固定电话

　　phone: {

    　　   message: ‘请输入正确的电话号码‘,

       　　phoneType: ‘LD‘  

　　}

6. idCard：身份证验证规则，15或18位验证

　　idCard: {

   　　    message: ‘请输入正确的身份证号码‘

   　}

7. emailAddress：邮箱验证规则

　　emailAddress: {

    　　   message: ‘请输入正确的邮箱地址‘

    　}

8.  regexp：自定义验证的正则表达式

　　regexp: {

　　　　regexp: /^1[34578]\d{9}$/,

　　　　message: ‘请填写正确的联系电话‘

　　}

9. remote：ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}

　　remote: {

       　　url: ‘exist2.do‘,//验证地址

         　  message: ‘用户已存在‘,//提示消息

              delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）

              type: ‘POST‘//请求方式

              /**自定义提交数据，默认值提交当前input value

              *  data: function(validator) {

             　　 return {

         　　　 　　password: $(‘[name="passwordNameAttributeInYourForm"]‘).val(),

                  　　  whatever: $(‘[name="whateverNameAttributeInYourForm"]‘).val();

   　　　}

         　*/

　　}

四、验证事件

1. 自定义表单提交按钮

<form class="form-login-box">

　　<div class="frm-btn-group">

　　　　<a href="javascript:void(0)" class="btn btn-org btn-login-submit">登录</a>

　　</div>

</form>

<script type="text/javascript">

$(‘.btn-login-submit‘).click(function(){

　　/// 点击提交按钮进行校验

 　  $(‘.form-login-box‘).data(‘jQValidator‘).validate();  

　　/// bool, 所有字段验证是否正确

　　var isValid = $(‘.form-login-box‘).data(‘jQValidator‘).isValid();

　　if(isValid){

   　　　////// 如果正确，执行的函数

　　}

 });

</script>

jQValidator.js使用说明

标签：登录   car   更改   exclude   justify   back   table   sheet   styles   

原文地址：http://www.cnblogs.com/TammyBlog/p/7376432.html