首页 > 代码库 > 表单校验

表单校验

2024-10-09 06:59:02   213人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrong{
            color: red;
        }
    </style>
    <script src="http://www.mamicode.com/jquery-1.9.1.js"></script>
    <script src="http://www.mamicode.com/jquery.validate.min.js"></script>

    <script>
        $(function () {
            $("#mgForm").validate({
                rules:{//date 日期   email 。com cn org net
                    username:{  //指的是input中name的名字
                        required:true,
                        minlength:6,
                        maxlength:10
                    },
                    age:{
//                      range:[18,80]
                        required:true,
                        PostCode:true
                    },
                    password:{
                        required:true,
                        rangelength:[2,6]
                    },
                    password1:{
                       equalTo:"#pass"
                    },
                    email:{
                        email:true
                    }
                },
                messages:{
                    username:{
                        required:"*此项必填",
                        minlength:"*用户名最小是6位",
                        maxlength:"*用户名最大是10位"
                    },
                    age:{
//                        range:"*年龄必须在18-80之间"
                        PostCode:"错误"
                    },
                    password:{
                        required:"*必填",
                        rangelength:"2-6"
                    },
                    password1:{
                        equalTo:"*密码不一致"
                    },
                    email:{
                        email:"*邮箱格式不正确"
                    }
                },
                submitHandler:function () {
                    alert("全部通过")
                },
                errorClass:"wrong",
//                ignore:"#pass1",//忽略密码不一
                 errorElement:"div",//改变错误提示的标签
                focusInvalid:true,
                focusCleanup:true,
                highlight:function (element,errorClass) {
                    $(element).addClass(errorClass);
                    $(element).fadeOut().fadeIn()
                }
            });
                $.validator.addMethod("PostCode",function () {
                    var reg=/^[0-9]{6}$/;
                    return reg.test(value)
                },"邮编输入不正确");
//                invalidHandler:function () {
//                    console.log(validator.numberOfInvalids())
//                }

            });
    </script>

</head>
<body>
<form action="" id="mgForm">
    <div>
        <label for="user">username:</label>
        <input type="text" name="username" id="user">
    </div>

    <div>
        <label for="pass">password:</label>
        <input type="text" name="password" id="pass">
    </div>
    <div>
        <label for="pass1">form-password:</label>
        <input type="text" name="password1" id="pass1">
    </div>
    <div>
        <label for="age">age:</label>
        <input type="text" name="age" id="age">
    </div>
    <div>
        <label for="email">email:</label>
        <input type="text" name="email" id="email">
    </div>

    <input type="submit" value="http://www.mamicode.com/提交">
    <!--<input type="button" value="http://www.mamicode.com/校验" id="aaa">-->
</form>
</body>
</html>
上面就是表单校验的一些代码
首先表单校验按钮的type值必须是submit而且是要写在form表单标签中的
给form标签一个id通过获取id来执行validate方法
rules是自定义的验证规则
username:{  //指的是input中name的名字
    required:true,
    minlength:6,
    maxlength:10
}
是relus下边写的东西
username是input文本框中name的名字
required是必须执行的东西而后面也必须写true
minlength是最少有几位
maxlength是最多有几位
rangelength[n,n]是设置一个长度范围
email是验证电子邮箱格式冒号后面必须跟true
range是设置值的范围
date验证日期格式是否正确
dateISO验证ISO的日期格式是否正确
messages是自定义的错误提示信息
也是在messgaes下面写文本框的name值然后写上面的这些东西后面跟上错误时的提示信息好比这样
username:{
    required:"*此项必填",
    minlength:"*用户名最小是6位",
    maxlength:"*用户名最大是10位"
}
如果文本框多的话可以在花括号后面写个逗号接着在下面写
submitHandler:function () {
}
这个函数是如果校验结果正确的话需要执行的函数在这个函数里可以写好多东西可以把填入进去的数据添加到后台里
errorClass:""给提示信息添加类名然后给他设置css样式
errorElement:"div"错误时的提示信息是默认创建一个标签这行代码可以改变他默认创建的标签
highlight:function (element,errorClass) {
    $(element).addClass(errorClass);
    $(element).fadeOut().fadeIn()
}
这个函数是当不满足条件的时候文本款会有一个闪动的效果
$.validator.addMethod("PostCode",function () {
    var reg=/^[0-9]{6}$/;
    return reg.test(value)
},"邮编输入不正确");
这个是一个自定的的校验方法通过在上面rules和essages中调用他的第一个参数来执行校验
这就是表单校验的一些方法吧比正则简单一些吧

表单校验


联系
我们