JQuery中Validate的使用--Ajax提交后台前的验证

具体细节请查看菜鸟教程。这里只是记录使用Validate的步骤。
validate文档,主要注意自定义校验与内置相关函数
这个例子主要包括Input/checkbox/passWords的简单例子,但是对于Form的表单验证类似:
第一步:引入相关js
第二步:准备Form 表单
第三步:书写校验规则(包括自定义的)
第四步:提交前进行校验【利用Form函数()】

代码粘出去,重新引入js文件,可以直接运行


<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
    <form id="SimpleValidate">
        <table class="frame">
            <tr>
            <th><span style="font-size: 15px; color: #FF0000">*span>主讲老师:th>
            <td>
                <input type="text" name="teacherInfo" id="teacherInfo"value="">
                <span class="errorSpan">span>
            td>
            tr>
            <tr>
            <th><span style="font-size: 15px; color: #FF0000">*span>邮编th>
            <td>
                <input type="text" name="hiddenInput" id="hiddenInput" value="" />
                <span class="errorSpan">span>
            td>
            tr>

            <tr>
            <th><span style="font-size: 15px; color: #FF0000">*span>密码th>
            <td>
                <input type="text" name="passWord" id="passWord" value="" />
                <span class="errorSpan">span>
            td>
            tr>
            <tr>
            <th><span style="font-size: 15px; color: #FF0000">*span>确认密码th>
            <td>
                <input type="text" name="rePassWord" id="rePassWord" value="" />
                <span class="errorSpan">span>
            td>
            tr>
            <tr>
                <th><span style="font-size: 15px; color: #FF0000">*span>多选框th>
                <td>
                    <input type="checkbox"  id="spam_email" value="email" name="checkBoxes"/>email
                    <input type="checkbox"  id="spam_phone" value="phone" name="checkBoxes" />phone
                    <input type="checkbox"  id="spam_mail" value="mail" name="checkBoxes" />mail
                    <span class="errorSpan">span>
                td>
            tr>
            <tr>
                <th><span style="font-size: 15px; color: #FF0000">*span>下拉框th>
                    <td>
                        <select id="jungle" name="jungle" title="Please select something!">
                             <option value="">option>
                             <option value="1">Bugaoption>
                             <option value="2">Bagaoption>
                             <option value="3">Oioption>
                        select>
                        <span class="errorSpan">span>
                    td>
            tr>
        table>
        <button type="button" onclick="AjaxRequest()">校验button>
    form>

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

<script type="text/javascript">
$(function(){
    //jquery validator 默认不验证隐藏域,此行代码打开
    $.extend($.validator.defaults, {ignore: ""});
    validateSimpleValidate();

});

// 提交之前进行验证
function AjaxRequest(obj) {
      if (validateSimpleValidate().form()) { //判断校验是否符合规则
          // 符合规则进入后台 ajax处理
    }else{
        // 不符合规则返回
        return false;
    } 
    }





//自定义校验
jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

// 校验规则
function validateSimpleValidate() {
    simpleValidateResult= $("#SimpleValidate").validate({
        rules: {
            teacherInfo: {
                required: true
            },
            hiddenInput: {
                required: true,
                isZipCode:true,
            },
            passWord: {
                required: true,
                minlength:2
            },
            rePassWord:{
                required: true,
                minlength:2,
                equalTo: "#passWord"
            },
            checkBoxes: {
                required:true,
                minlength:2 
            },
            jungle:{
                required:true,
            }
    },
     messages: {
         teacherInfo: {
                required: "主讲老师不能为空",
            },
           hiddenInput:{
                required:"不能为空",
            },
            passWord: {
               required:"不能为空",
               minlength:"至少两个"
            },
            rePassWord: {
               required:"不能为空",
               minlength:"至少两个",
               equalTo:"请输入相同的值"
            },
           checkBoxes: {
               required:"不能为空",
               minlength:"至少选择两个"
           },
           jungle:{
            required:"至少选择一个",
           }
     },
        errorPlacement: function (error, element) { // 自定义设置错误信息提示位置
            error.appendTo(element.parent().find("span[class='errorSpan']"));
        }
    });
  return simpleValidateResult;
}
script>
body>
html>



你可能感兴趣的:(Jquery笔记,开发中的小知识)