jQuery Validate插件验证表单

最新推荐文章于 2022-01-11 13:48:13 发布

qq_2623843046

最新推荐文章于 2022-01-11 13:48:13 发布

阅读量256

点赞数

分类专栏：个人知识管理文章标签： jquery 表单插件

本文链接：https://blog.csdn.net/qq_40482686/article/details/78922822

版权

个人知识管理专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery Validate插件验证表单

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步表单验证</title>
    <style>
        .error{
            color:red;
        }
    </style>
</head>
<body>
<form class="ibox-content" id="signupForm" method="post">
    <p>
        <label for="uid">
            员工编号:<input type="text" class="form-control input_text_200" name="uid" value="" id="uid">
        </label>
    </p>
    <p>
        <label for="username">
            员工姓名:<input type="text" class="form-control input_text_200" name="username" value="" id="username">
        </label>
    </p>
    <p>
        <label for="re_mobile">
            手机号:<input type="text" class="form-control input_text_200" name="re_mobile" value="" id="re_mobile">
        </label>
    </p>
</form>

script文件引用

<script src="js/jquery.min.js"></script>
<!--验证插件-->
<script src="js/jquery.validate.min.js"></script>
<!--中文信息提示包-->
<script src="js/messages_zh.js"></script>

script代码

 $().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
        $("#signupForm").validate({

            //校检
            rules:{
                //验证员工编号
                uid:{
                    required: true,//"这是必填字段",
                    minlength:1,
                    maxlength: 60
                },
                //员工姓名
                username:{
                    required:true,
                    minlength:2,
                    maxlength:10,
                    isChar:true
                },
                //手机号
                re_mobile: {
                    required: true,
                    minlength:11,
                    maxlength:11,
                    isMobile:true
                }
            },
            //提示信息
            messages:{
                uid: {
                    required: "请输入员工编号!",
                    minlength: "员工编号不能低于1个字符!",
                    maxlength: "员工编号不能超过60个字符!"
                },
                username: {
                    required:"最少为2个字！"
                },
                re_mobile: {
                    required:"请填写手机号码！"
                }
            },
            errorPlacement: function(error, element) {
                // Append error within linked label
                $( element )
                    .closest( "form" )
                    .find( "label[for='" + element.attr( "id" ) + "']" )
                    .append( error );
            },
            errorElement: "span"
        });

        //添加自定义校验,addMethod：name, method, message
        jQuery.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var regPhone = /^1([3578]\d|4[57])\d{8}$/;
            return this.optional(element) || ( length == 11 && regPhone.test( value ) );
        }, "请正确填写您的手机号码");
        jQuery.validator.addMethod("isChar", function(value, element) {
            var length = value.length;
            var regName = /[^\u4e00-\u9fa5]/g;
            return this.optional(element) || !regName.test( value );
        }, "请正确格式的姓名(暂支持汉字)");
        jQuery.validator.addMethod("isCarNum", function(value, element) {
            var length = value.length;
            var carNum = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
            return this.optional(element) || (length == 7 && carNum.test(value));
        },"请正确填写您的车牌号");
    });

qq_2623843046

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery Validate插件验证表单

jQuery Validate插件验证表单html部分&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;异步表单验证&lt;/title&gt; &lt;style&gt
复制链接

扫一扫