jquery-plugin-validate插件做验证

具体一下dome在官方中文手册中有：http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

下面是个人用到的案例

<script type="text/javascript" src="/dealer/js/validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="/dealer/js/validate/messages_zh.js"></script>
<style>
    #tab li{float:left; margin-left:20px;list-style-type:none; margin-top:-10px;}
    span.error{color:red; background: url("dealer/images/lg_p8.gif") no-repeat scroll -5px -3px rgba(0, 0, 0, 0);
        padding-left: 16px;}
</style>
<?php $form=$this->beginWidget('CActiveForm',array(
    'id' => 'tab',
));?>
    <p>新名字：<input type="text" name="name" placeholder="8个字符，中文等于2个字符"></p>
    <p>旧密码：<input type="text" name="pwd" placeholder="请填原密码"></p>
    <p style="color:red">这里ajax去查表检验旧密码是否填写正确</p>
    <p>新密码：<input type="text" id="newPwd1" name="newPwd1" placeholder="请填写密码"></p>
    <p>重复新密码：<input type="text" name="newPwd2" placeholder="两次密码一致"></p>
    性别：
    <ul class="li_select">
         <li><input type="radio" class="check_sex" name="sex[]" value="1">男</li>
         <li><input type="radio" class="check_sex" name="sex[]" value="2">女</li>
         <li><input type="radio" class="check_sex" name="sex[]" value="0">保密</li>
    </ul>
    <a style="color:red">是否触发验证性别</a><span id="check_sex" style="cursor:pointer;background-color:blue;color:yellow;">触发验证</span><br/>
    爱好：
    <ul>
        <li><input type="checkbox" name="like[]" value="1">足球</li>
        <li><input type="checkbox" name="like[]" value="2">篮球</li>
        <li><input type="checkbox" name="like[]" value="3">排球</li>
        <li><input type="checkbox" name="like[]" value="4">棒球</li>
    </ul>
    <div>
        <button class="btn btn-primary">Update</button>
    </div>
<?php $this->endWidget();?>

<script>
    $(function(){
        $('#check_sex').click(function(){
            $('.check_sex').rules('add',{required:true});
        })
        //表单validata验证
        $("#tab").validate({
            /* 设置校验规则 */
            rules: {
                'name':{required : true,check_num: [8]},
                'pwd' :{required : true,
                        remote:{
                            url : "<?= Yii::app()->createUrl('user/dealerInfo/checkPwd');?>", //后台处理程序
                            dataType: "json",       //接受数据格式，必须发挥json格式
                            type: "get",            //数据发送方式
                            data: {
                                pwd: function(){    //返回的数据格式必须是json格式，而且只能是true和false
                                    return $("input[name=pwd]").val();  //这种写法才能得到编写后的值
                                }}
                        }
                },
                'newPwd1':{required : true},
                'newPwd2':{equalTo:'#newPwd1'}
            },
            /* 设置错误信息 */
            messages: {
                'name': {
                    required : ' 不能为空',
                    check_num: ' 请勿超出8个字符限制',
                },
                'pwd':{
                    required: ' 不能为空',
                    remote  : ' 原密码不正确',
                },
                'newPwd1':{
                    required: ' 不能为空',
                },
                'newPwd2':{
                    equalTo  : ' 两次密码不一致',
                },
                'sex[]':{
                    required: ' 不能为空',
                }
            },
            errorElement:"span",                         //设置显示错误用span标签，默认是label，这里注意用双引号
            errorPlacement: function(error, element) {
                if(element.parents().hasClass("li_select")){
                    error.appendTo(element.parents('.li_select'));  //设置radio的错误提示
                }else{
                    error.appendTo(element.parent());
                }
            },
//            ignore:'',          //隐藏input标签验证
//            onfocusout: false,  //编写时离开不触发
//            onsubmit: true,     //提交时触发
        })
        //添加检验中英文内容个数函数,中文等于2个字符的检验
        $.validator.addMethod("check_num", function(value, element ,param){
            var replace_value = value.replace(/[^\x00-\xff]/g, "xx").length;
            if(replace_value <= param[0])
                return true;
        },'请勿超出字数限制');
        //电话验证规则,参数传param[参数1,参数2],传参数1验证座机,参数2验证手机
        $.validator.addMethod("phone", function (value, element ,param) {
            var phone1 = /^0\d{2}-\d{7,8}$/;
            var phone2 = /^1(([358]{1}[0-9]{1})|(47|70|76|77|78))[0-9]{8}$/;
            return (param[0]==1 && (this.optional(element) || (phone1.test(value)))) || (param[1]==1 && (this.optional(element) || (phone2.test(value))));
        }, "请输入正确格式");
    })
</script>