HTML前端表单校验的方法

拼搏现实的明天。 2023-10-03 23:50 30阅读 0赞

## 1：jQuery框架的验证：validate框架 ##

### 1.1：Jquery Validate 验证规则 ###

(1)required:true 必输字段

(2)remote:”check.PHP” 使用ajax方法调用check.php验证输入值

(3)email:true 必须输入正确格式的电子邮件

(4)url:true 必须输入正确格式的网址

(5)date:true 必须输入正确格式的日期

(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

### 1.2：Jquery Validate 自定义验证规则 ###

**addMethod(name,method,message)方法**

参数 name 是添加的方法的名字。

参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身， param是参数

我们可以用addMethod 来添加除built-in Validation methods 之外的验证方法比如有一个字段,只

能输一个字母,范围是a-f,写法如下:

$.validator.addMethod(“af”,function(value,element,params){
        if(value.length>1){
            return false;
        }
        if(value>=params[0] && value<=params[1]){
            return true;
        }else{
            return false;
        }
    },”必须是一个字母,且a-f”);

如果有个表单字段的 id="username"，则在 rules 中写：

username:{
        af:["a","f"]
    }

addMethod 的第一个参数，是添加的验证方法的名字，这时是 af。

addMethod 的第二个参数，是一个函数，这个比较重要，决定了用这个验证方法时的写法。

addMethod 的第三个参数，是自定义的错误提示，这里的提示为:"必须是一个字母,且a-f"。

## 2：JavaScript的blur事件写的验证： ##

<!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style>
        /* form{
          margin-left:400px;
      } */
    </style>
    <script src="js/jquery.min.js"></script>
     
    <script>
        $(function () {
            var a = b = c = d = e = f = g = false;
            $("#tables").css({ "border": '1px solid blue', 'text-align': 'center' }).css("width", "800").css("height", "400px")
            $('td').css({ "border": "1px solid blue" })
            $("#td1").css({ 'width': '100' })
            $("#td2").css({ "width": "400" })
            $("#td3").css({ "width": "300" })
            // 设置id a的颜色
            $('span').css('color', 'red')
            //登录名的验证
            $("input[name='username']").blur(function () {
                var va = $(this).val();
                var char = va.charCodeAt(0);
                //alert(va);
                if (va == "") {
                    a = false;
                    // $(this).click(function(){
                    //     $('#a').css('background','blue').css('width','100px')
                    // })
                    $('#a').html(function () {
                        return "值不能为空";
                    })
                }
                else if (va.length < 6) {
                    a = false;
                    $('#a').html('登录名不能少于6个字')
                }
                else if (!((char >= 65 && char <= 90) || (char >= 97 && char <= 122))) {
                    a = false;
                    $('#a').html('登录名的首字母只能为字母')
                }
                else {
                    a = true;
                    $('#a').html(function () {
                        return '';
                    })
                }
            })
            //验证姓氏
            $("input[name='xing']").blur(function () {
                var xing = $(this).val();
                if (xing == '') {
                    b = false;
                    $('#b').html('值不能为空')
                }
                else if(xing.length>6){
                    b=false;
                    $('#b').html('你的姓氏不符合要求,字符长度超过6')
                }
                else{
                    b=true;
                    $('#b').html(function(){
                        return '';
                    })
                }
            })
            //验证密码
            $('#password_1').blur(function(){
                var va=$('#password_1').val();
                if(va==''){
                    c=false;
                    $('#c').html('密码不能为空')
                }
               else if(va.length<8){
                    c=false;
                    $('#c').html('你的密码不足8位数不符合要求')
                }
                else{
                    c=true;
                    $('#c').html('');
                }
            })
            //密码重复验证
            $('#password_2').blur(function(){
                //拿到本身的密码
                var va1=$(this).val();
                //拿到之前的密码
                var va2=$('#password_1').val();
                if(va1==''){
                    d=false;
                    $('#d').html('密码不能为空')
                }
                else if(va1!=va2){
                    d=false;
                    $('#d').html('两次密码不正确')
                }
                else{
                    d=true;
                    $('#d').html('')
                }
            })
            //性别选择直接选中下下标为1的
            $('input[name=sex]:eq(1)').prop('checked','checked')
            $('input[name=sex]').blur(function(){
     
            })
            //年验证
            $('#year').blur(function(){
                //拿到年的值
                var va=$(this).val();
                // var v=Number(va);
               //alert(va)
               var s=/^[0-9]+$/;
                if(va==''){
                    f=false;
                    $('#f').hmtl('年不能为空')
                }
                // else if(!s.test(va)){
                //     f=false;
                //     $('#f').hmtl('年只能是数字')
                // }
                else if(isNaN(va)){
                    f=false;
                    $('#f').html('年只能是数字')
                }
                else if(va.length!=4){
                    f=false;
                    $('#f').html('值必须为4位数')
                }
                else{
                    f=true;
                    $('#f').html('')
                }
     
            })
        //天数验证
        $("input[name='day']").blur(function(){
            var va=$(this).val();
            var t = /^(([1-9])|((1|2)[0-9])|30|31)$/;
            if(va===''){
                g=false;
                $('#f').html('天数不能为空')
            }
            else if(! t.test(va)){
                g=false;
                $('#f').html('对不起，天数必须在 1-31 之间!')
            }else{
                g=true;
                $('#f').html('')
            }
        })
        $('#su').click(function(){
          return  a&&b&&c&&d&&f&&g
        })
     
        })
    </script>
     
    <body>
        <form action="s">
            <table id="tables">
                <tr>
                    <td colspan="3">
                        <img src="data:images/d.png" alt="">
                    </td>
     
                </tr>
                <tr>
                    <td id="td1">登录名</td>
                    <td id="td2">
                        <input id="input1" type="text" name="username">
                    </td>
                    <td id="td3">
                        <span id="a"></span>
                    </td>
                </tr>
                <tr>
                    <td>姓氏</td>
                    <td>
                        <input type="text" name="xing">
                    </td>
                    <td>
                        <span id="b"></span>
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="password" name="password" id="password_1">
                    </td>
                    <td>
                        <span id="c"></span>
                    </td>
                </tr>
                <tr>
                    <td>再次输入密码</td>
                    <td>
                        <input type="password" name="password" id="password_2">
                    </td>
                    <td>
                        <span id="d"></span>
                    </td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="sex" value="男" >男
                        <input type="radio" name="sex" value="女">女
                    </td>
                    <td>
                        <span id="e"></span>
                    </td>
                </tr>
                <tr>
                    <td>生日</td>
                    <td>
                        <input type="text" name="year" id="year">
                        <select name="month" id="select_1">
                            <option value="一月" selected>一月</option>
                            <option value="二月">二月</option>
                            <option value="三月">三月</option>
                        </select>
                        <input type="text" name="day">
                    </td>
                    <td>
                        <span id="f"></span>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <input type="reset" value="reset">
                    </td>
     
                </tr>
                <tr>
                    <td colspan="3">
                        <input type="submit" value="提交" id="su">
                    </td>
                </tr>
            </table>
        </form>
    </body>
     
    </html>