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

最新推荐文章于 2024-01-26 10:05:23 发布

發V發

最新推荐文章于 2024-01-26 10:05:23 发布

阅读量2.7k

点赞数 2

分类专栏： Jquery笔记开发中的小知识文章标签： JQuery的Validate验证 ajax中验证 validate验证模板

本文链接：https://blog.csdn.net/sinat_28978689/article/details/80725339

版权

开发中的小知识同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Jquery笔记

4 篇文章 0 订阅

订阅专栏

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</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">Buga</option>
                             <option value="2">Baga</option>
                             <option value="3">Oi</option>
                        </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>

發V發

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery中Validate的使用--Ajax提交后台前的验证

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

扫一扫