jquery_validate验证

jquery_validate的介绍

使用jquery_validate脚本可以进行客户端的信息的验证，使用起来方便快捷，只需要在需要验证的地方引用jquery的js脚本就好了。

jquery_validate 脚本下载

点击下载,如果您是tp框架的使用者，将下载好的压缩包解压在项目目录的public/static下。（小编用来演示的就是tp框架）

引用

引用这三个js脚本

<script src="/static/jQuery_validate/lib/jquery.js"></script>
<script src="/static/jQuery_validate/lib/jquery.mockjax.js"></script>
<script src="/static/jQuery_validate/dist/jquery.validate.js"></script>

html代码

<h2 class="text-center text-success">专业信息管理列表</h2>
<table class="table table-hover">
    <form action="{:url('admin/Major/delete')}" method="post" id="major_form">
    <thead class="lead">
        <tr>
            <td><input type="checkbox"  name="chkAll" onclick="chkAll_onclick(this)" /></td>
            <td>id</td>
            <td>专业名称</td>
            <td>院系</td>
            <td>专业编号</td>
            <td>国标专业代码</td>
            <td>学制</td>
            <td>培养层次</td>
            <td>所属学科</td>
            <td>状态</td>
            <td>创建时间</td>
            <td colspan="2">操作</td>
        </tr>
    </thead>
    
    {volist name="majorList" id="major"}
    <tr>
        <td><input type="checkbox" name="ids[]" value="{$major.id}" ></td>
        <td>{$major.id}</td>
        <td>{$major.major}</td>
        <td>{$major.department_id}</td>
        <td>{$major.major_number}</td>
        <td>{$major.major_code}</td>
        <td>{$major.learning}</td>
        <td>{$major.level}</td>
        <td>{$major.subject}</td>
        <td>
            {eq name="$major->getdata('status')" value="1"}
            <span class="glyphicon glyphicon-ok-circle" style="color:green;">启用</span>
            {else/} 
            <span class="glyphicon glyphicon-remove-circle" style="color:red;">禁用</span>
            {/eq}
        </td>
        <td>{$major.create_time}</td>
        <td>
            <a href="{:url('admin/Major/majorEdit',['id'=>$major.id])}">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </a>
        </td>      
<!--  将a标签的默认行为取消有两种方法：1，在href中写javascript:;  2,在onclick的函数后面写;return false, 建议用第二种方法-->
        <td>
            <a href="javascript:;" onClick="dele()">
                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
            </a>
        </td>       
    </tr>
    {/volist}
    </form>
</table>
<div class="text-center">{$majorList|raw} </div>

js代码，在自定义的js脚本中写规则（rule）和提示信息（messages）

$( "#login" ).validate({
    
    
  rules: {
    
    
    major: "required",
    major_number: "required",
    major_code: "required",
    learning: "required",
    level: "required",
    subject: "required"
  },
  messages:{
    
    
    major:"请输入专业名称信息",
    major_number:"请输入专业编号",
    major_code:"请输入国际专业代码",
    learning:"请填写1~10的数",
    level:"请输入层次信息",
    subject:"请输入所属学科",
  },
    submitHandler:function()
    {
    
    
    	//这里写验证成功之后的操作，通常和ajax连用，验证成功之后用ajax提交数据。
    }
});

校验规则

使用：必须使用表单的name属性值来判断校验规则

rule规则

 (1)required:true      必输字段 
 (2)remote:"validate.jsp"   使用ajax方法调用validate.jsp验证输入值 
 (3)email:true      必须输入正确格式的电子邮件
 (4)url:true      必须输入正确格式的网址 
 (5)date:true        必须输入正确格式的日期 日期校验ie6出错，慎用 
 (6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格 式，不验证有效性 
 (7)number:true        必须输入合法的数字(负数，小数) 
 (8)digits:true      必须输入整数 
 (9)creditcard:      必须输入合法的信用卡号 
 (10)equalTo:"#field"      输入值必须和#field相同 
 (11)accept:      输入拥有合法后名的字符串（上传文件的后） 
 (12)maxlength:5       输入长度多是5的字符串(汉字算一个字符) 
 (13)minlength:10       输入长度小是10的字符串(汉字算一个字符)
 (14)rangelength:[5,10]  输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) 
 (15)range:[5,10]        输入值必须介于 5 和 10 之间 
 (16)max:5       输入值不能大于5 
 (17)min:10       输入值不能小于10

messages默认规则

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date ( ISO ).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

更改提示信息位置、大小、颜色等

       默认情况下message提示信息颜色是黑色的，而且默认位置不受控制，有可能是在文本框的上面，也可能出现在下面，也可能出现在旁边。现在，加入我们想让提示信息出现在文本框的右边，并且颜色改为红色，那我们如何改变呢?
       答：其实jquery_validate脚本写的就是在文本框附近写一个类名为 error 的label标签，将用户自定义的messages内容写在这个label标签里，所以，我们可以先发制人，先自己写好一个类名为error 的label标签，然后就可以自定义盒子的位置和字体颜色、大小等要求了，还有值得注意的是，这个类名为error的label标签必须要for一下它对应的文本输出框的id

效果为：