Étapes pour jQuery Valider le didacticiel pratique

jQuery Validate

Le plug-in jQuery Validate fournit de puissantes fonctions de validation pour les formulaires, facilitant la validation des formulaires côté client et offrant un grand nombre d'options de personnalisation Meet. divers besoins d'application.

1. Tout d'abord, si nous n'avons pas jquery.validata.js, nous devons le télécharger. Cliquez sur le lien de téléchargement donné par Dieu

2. Créez un environnement opérationnel, c'est-à-dire introduisez les plug-ins dont nous avons besoin.

3. Écrivez du contenu HTML et créez un formulaire

<form id="demoForm">
            <p>
                <label for="user">username:</label>
                <input type="text" name="username" id="user"/>
            </p>
            <p>
                <label for="pass">password:</label>
                <input type="password" name="password" id="pass"/>
            </p>
            <p>
                <label for="age">         age:</label>
                <input type="text" name="age" id="age"/>
            </p>
            <p>
                <label for="post">postcode:</label>
                <input type="text" name="PostCode" id="post"/>
            </p>
            <input type="submit" value="提交" id="btn"/>
        </form>

L'effet est le suivant :

4. Editer le code js

<script type="text/javascript">$(function  () {//用来绑定所需操作的form表单$('#demoForm').validate({  
                    rules:{       //返回元素验证规则//绑定元素的name值                        username:{    
                            required:true,    //设置为必填选项rangelength:[3,6]//最小长度和最大长度                        },
                        password:{//绑定元素的name值 required:true,    //设置为必填选项rangelength:[6,12]//最小长度和最大长度                        },
                        age:{     //绑定元素的name值 
//                            min:18,          //最小值//                            max:999,         //最大值range:[18,999],  //最小值和最大值rangelength:[1,3],//最小长度和最大长度digits:true      //正整数                        },
                        PostCode:{  //绑定元素的name值 required:true,   //设置为必填选项PostCode:true    //自定义验证                        }
                    },//验证错误时的提示                    messages:{    
                        username:{     //绑定元素的name值 required:'此项必填',    //提示的错误信息rangelength:'用户名长度为3-6位'        //提示的错误信息                        },
                        password:{     //绑定元素的name值 required:'此项必填' ,          //提示的错误信息rangelength:'用户名长度为6-12位'       //提示的错误信息                        },
                        age:{     //绑定元素的name值 range:'年龄必须是18--999之间',//提示的错误信息rangelength:'1~3位数',       //提示的错误信息digits:'年龄必须是正整数'     //提示的错误信息                        },
                        PostCode:{ //绑定元素的name值 required:'此项必填'        //提示的错误信息                        }
                    },//当表单通过验证执行的操作                    submitHandler:function  () {
                        alert("校验全部通过")
                    },//当未通过验证的表单提交时执行的操作                    invalidHandler:function () {
                        alert("no");
                    }
                });                
                //自定义一个表单验证$.validator.addMethod('PostCode',function(value){var reg=/^[0-9]{6}$/;return reg.test(value); 
                },'必须是邮编格式的')
            })</script>

Le rendu est le suivant :

D'accord, voici les étapes pour utiliser jQuery Valider. Il existe également quelques propriétés de validation simples dans le code.

Si tu veux en savoir plus, viens me piquer ! Pique-moi !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!