使用jQuery的validation插件实现表单校验
程序员文章站
2022-06-22 12:56:21
前端表单校验: ......
前端表单校验:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单校验(使用validation插件实现)</title> 6 <script src="../jslib/jquery-1.11.0.js"></script> 7 <script src="../jslib/jquery.validate.js"></script> 8 <script src="../jslib/messages_zh.js"></script> 9 10 <script> 11 $(function () { 12 $("#formid").validate({ 13 rules:{ 14 username:{ 15 required:true 16 }, 17 password:{ 18 required:true, 19 rangelength:[6,10] 20 }, 21 repassword:{ 22 required:true, 23 equalTo:"[name='password']" 24 }, 25 height:{ 26 required:true, 27 min:[180] 28 }, 29 age:{ 30 required:true, 31 range:[18,56] 32 } 33 }, 34 messages:{ 35 username:{ 36 required:"不能为空" 37 }, 38 password:{ 39 rangelenght:"密码长度必须在在6-10个字符之间" 40 }, 41 height:{ 42 min:"身高必须在180以上" 43 }, 44 age:{ 45 range:"年龄必须在在18岁到56岁之间" 46 } 47 } 48 }); 49 }); 50 </script> 51 </head> 52 <body> 53 <form id="formid" action="#"> 54 55 <!--不能为空--> 56 用户名:<input type="text" name="username"/> <br/> 57 58 <!--长度在6-10个字符之间--> 59 密码:<input type="text" name="password"/> <br /> 60 61 重复密码:<input type="text" name="repassword"/> <br /> 62 63 <!--大于180cm--> 64 身高:<input type="text" name="height"/> <br /> 65 66 <!--在18岁到56岁之间--> 67 年龄:<input type="text" name="age"/> <br /> 68 69 邮箱:<input type="text" name="email"/> <br /> 70 71 <input type="submit" value="提交"/> 72 </form> 73 </body> 74 </html>
上一篇: JQuery显示,隐藏和淡入淡出效果
下一篇: HUdson2092整数解
推荐阅读
-
vue 使用自定义指令实现表单校验的方法
-
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
-
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
-
jQuery中使用validate插件校验表单功能
-
Extjs表单输入框异步校验的插件实现方法
-
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
-
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
-
jQuery使用zTree插件实现可拖拽的树示例
-
SpringBoot使用validation-api实现对枚举类参数校验的方法
-
vue 使用自定义指令实现表单校验的方法