现在很多网站的注册模块都可以实现即时检查格式是否正确,这样极大的增强了用户体验,对开发非常有利。
下面的代码是利用jquery实现了对一个表单字段格式的即时检查(包括字段长度、邮箱格式),同时在提交时,再次出发检查事件。
注意这个检查是keyup和focus上为主,利用这两个事件来触发blur(失去焦点)事件。
<html> <head> <meta charset=\"utf-8\" /> <title></title> <link href=\"css/style.css\" rel=\"stylesheet\" type=\"text/css\" /> <script src=\"jquery-1.3.2.min.js\"></script> <script> $(function () { //为每个必填字段后面加上* $(\"form :input.required\").each(function () { var $required = $(\"<strong class=\'high\'>*</strong>\"); $(this).parent().append($required); }); //textbox失去焦点事件 $(\"form :input\").blur(function () { var $parent = $(this).parent(); $parent.find(\".formtips\").remove(); if ($(this).is(\'#username\')) { if (this.value == \"\" || this.value.length < 6) { var errorMsg = \"请输入至少6位的用户名\"; $parent.append(\'<span class=\"formtips onError\">\' + errorMsg + \"</span>\"); } else { var okMsg = \"输入正确\" $parent.append(\'<span class=\"formtips onSuccess\">\' + okMsg + \'</span>\'); } } if ($(this).is(\'#email\')) { if (this.value == \"\" || (this.value != \"\" && !/.+@.+\\.[a-zA-Z]{2,4}$/.test(this.value))) { var errorMsg = \"请输入正确的E-Mail地址\"; $parent.append(\'<span class=\"formtips onError\">\' + errorMsg + \"</span>\"); } else { var okMsg = \"输入正确\" $parent.append(\'<span class=\"formtips onSuccess\">\' + okMsg + \'</span>\'); } } }).keyup(function () { $(this).triggerHandler(\"blur\");//keyup和focus利用triggerHandler来触发blur事件 }).focus(function () { $(this).triggerHandler(\"blur\"); }); $(\"#send\").click(function () {//提交按钮事件 $(\"form .required:input\").trigger(\'blur\'); var numError = $(\'form .onError\').length; if(numError) { return false; } alert(\"注册成功,密码已发到你的邮箱,请查收\"); }); }); </script> </head> <body> <form method=\"post\" action=\"\"> <div class=\"int\"> <label for=\"username\">用户名</label> <input type=\"text\" id=\"username\" class=\"required\" /> </div> <div class=\"int\"> <label for=\"email\">邮箱</label> <input type=\"text\" id=\"email\" class=\"required\" /> </div> <div class=\"int\"> <label for=\"=personinfo\">个人资料</label> <input type=\"text\" id=\"personinfo\" /> </div> <div class=\"sub\"> <input type=\"submit\" value=\"提交\" id=\"send\" /> <input type=\"reset\" id=\"res\" /> </div> </form> </body> </html>
更多内容点击:jquery表单验证大全
以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。
本文地址:https://www.stayed.cn/item/1885
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我