碼上歡樂
相關內容    簡體    繁體

jQuery表單驗證的幾種方法

本文轉載自   查看原文   2018-08-13 00:53   671    js

1.jQuery的框架的驗證：validate框架

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

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 的第三個參數,就是自定義的錯誤提示,這里的提示為:”必須是一個字母,且a-f”
addMethod 的第二個參數,是一個函數,這個比較重要,決定了用這個驗證方法時的寫法
如果只有一個參數,直接寫,如果af:”a”,那么a 就是這個唯一的參數,如果多個參數,用在[]里,用逗號分開

<!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>
    <style>
        .error{
            color: red;
        }
    </style>


<script src="js/jquery.min.js"></script>
<!-- 導入的框架 -->
<script src="js/jquery.validate.min.js"></script>
<script>
    $(function(){
        $('#a').validate({
            rules:{
                username:{
                    required:true
                },
                password_1:{
                    required:true,
                    rangelength:[5,10],

                },
                password_2:{
                    required:true,
                    equalTo:'#pa'
                },
                sex:{
                    required:true
                },
                you:{
                    required:true,
                    email:true
                },

            },
            messages:{
            username:{
                required:'字段不能為空'
               },
               password_1:{
                required:'字段不能為空',
                rangelength:'密碼長度要在5到10位',
               },
               password_2:{
                required:'字段不能為空',
                equalTo:'兩次密碼不一樣'
               },
               sex:{
                required:'性別不能為空',
               },
               you:{
                required:'郵箱不能為空',
                email:'郵箱格式不對'
               }
           }
        })
    })
</script>
</head>
<body>
    <form action="a.jsp" method="post" id="a">
        請輸入姓名:<input type="text" name="username" ><br>
        請輸入密碼: <input type="password" name="password_1" id="pa"><br>
        確認密碼: <input type="password" name="password_2" ><br>
      
        性別: <input type="radio" name="sex" value="男">男
             <input type="radio" name="sex" value="女">女
             <label for="sex" generated="true" class="error"></label><br>
             郵箱: <input type="text" name="you" ><br>
             <input type="submit" value="submit">
    </form>
</body>
</html>

第二種就是js的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="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>

 

<!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 >
< style >
.error{
color: red;
}
< / style >


< script src= "js/jquery.min.js" ></ script >
<!-- 導入的框架 -->
< script src= "js/jquery.validate.min.js" ></ script >
< script >
$( function(){
$( '#a'). validate({
rules:{
username:{
required: true
},
password_1:{
required: true,
rangelength:[ 5, 10],

},
password_2:{
required: true,
equalTo: '#pa'
},
sex:{
required: true
},
you:{
required: true,
email: true
},

},
messages:{
username:{
required: '字段不能為空'
},
password_1:{
required: '字段不能為空',
rangelength: '密碼長度要在5到10位',
},
password_2:{
required: '字段不能為空',
equalTo: '兩次密碼不一樣'
},
sex:{
required: '性別不能為空',
},
you:{
required: '郵箱不能為空',
email: '郵箱格式不對'
}
}
})
})
< / script >
</ head >
< body >
< form action= "a.jsp" method= "post" id= "a" >
請輸入姓名: < input type= "text" name= "username" >< br >
請輸入密碼: < input type= "password" name= "password_1" id= "pa" >< br >
確認密碼: < input type= "password" name= "password_2" >< br >
 
性別: < input type= "radio" name= "sex" value= "男" >男
< input type= "radio" name= "sex" value= "女" >女
< label for= "sex" generated= "true" class= "error" ></ label >< br >
郵箱: < input type= "text" name= "you" >< br >
< input type= "submit" value= "submit" >
</ form >
</ body >
</ html >


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Jquery ajax提交表單幾種方法 獲取表單value值的幾種方法 form表單提交的幾種方法 form表單提交的幾種方法 validate表單驗證兩種方法 jQuery 獲取父元素的幾種方法 jquery 添加節點的幾種方法介紹 jquery中隱藏div的幾種方法 Webpack引入jquery及其插件的幾種方法 表單驗證Jquery擴展方法類
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM