客户端的验证插件validator
简单,智能,令人愉悦的表单验证~~~
官方文档:http://www.niceue.com/validator/
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="js/validator/jquery.validator.css"/> <script src="js/jquery.min.js"></script> <script src="js/validator/jquery.validator.min.js"></script> <script src="js/validator/local/zh-CN.js"></script> <script> $(function(){ $('#userform').validator({ rules: { telnumber: [/^\d{11}$/], adminame:function(){ return $("#username").val()=="admin"||"请输入正确的用户名" } }, fields: { username:{ rule:"required;adminame", msg: { required: "请填写用户名!" } }, usertel:{ rule:"required;telnumber", msg: { required: "请填写手机号码!", telnumber:"请输入11位数字的手机号码" }, tip:"密码由6-20位数字、字母或下划线组成!", ok: "输入正确" } }, valid: function(form){ //表单验证通过,提交表单到服务器 alert("验证通过"); $.ajax({ url: "result.php", data: $(form).serialize(), success: function(d){ //do something } }); } }) }) </script> </head> <body> <form name="userform" id="userform"> 用户名:<input type="text" name="username" id="username" placeholder="请输入用户名"/> <span class="msg-box" for="loginName"></span><br><br> 手机号:<input type="tel" name="usertel" placeholder="请输入手机号"/><br><br> <button type="submit">提交</button> </form> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步