分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

使用jQuery的validation插件实现表单校验

发布时间:2023-09-06 01:35责任编辑:熊小新关键词:jQuery

前端表单校验:

 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:true16 ????????????????????},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的validation插件实现表单校验

原文地址:https://www.cnblogs.com/gdwkong/p/8267451.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved