网页中如何实现注册时表单检验(两次输入的密码是否相同)
2013-10-23 13:34
621 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>jQuery validation plug-in - main demo</title> <script src="../lib/jquery.js" type="text/javascript"></script> <script src="../jquery.validate.js" type="text/javascript"></script> <script src="js/cmxforms.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#signupForm").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required" }, messages: { firstname: "Please enter your firstname", lastname: "Please enter your lastname", username: { required: "Please enter a username", minlength: "Your username must consist of at least 2 characters" }, password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, confirm_password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long", equalTo: "Please enter the same password as above" }, email: "Please enter a valid email address", agree: "Please accept our policy" } }); }); </script> </head> <body> <div id="main"> <form class="cmxform" id="signupForm" method="get" action=""> <fieldset> <legend>Validating a complete form</legend> <p> <label for="firstname">Firstname</label> <input id="firstname" name="firstname" /> </p> <p> <label for="lastname">Lastname</label> <input id="lastname" name="lastname" /> </p> <p> <label for="username">Username</label> <input id="username" name="username" /> </p> <p> <label for="password">Password</label> <input id="password" name="password" type="password" /> </p> <p> <label for="confirm_password">Confirm password</label> <input id="confirm_password" name="confirm_password" type="password" /> </p> <p> <label for="email">Email</label> <input id="email" name="email" /> </p> <p> <label for="agree">Please agree to our policy</label> <input type="checkbox" id="agree" name="agree" /> </p> <p> <label for="newsletter">I'd like to receive the newsletter</label> <input type="checkbox" id="newsletter" name="newsletter" /> </p> <fieldset id="newsletter_topics"> <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend> <label for="topic_marketflash"> <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> Marketflash </label> <label for="topic_fuzz"> <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> Latest fuzz </label> <label for="topic_digester"> <input type="checkbox" id="topic_digester" value="digester" name="topic" /> Mailing list digester </label> <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> </fieldset> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form> </div> </body> </html>
View Code
jQuery验证控件jquery.validate.js
官网下载地址: http://bassistance.de/jquery-plugins/jquery-plugin-validation
jQuery plugin: Validation 使用说明
转载自:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html
相关文章推荐
- [JavaScript]使用JavaScript+CSS实现注册页面中检验两次密码输入是否相同
- 如何实现表单提交时,验证两次密码是否一致
- JS【判断输入表单是否为空、两次输入密码是否相同】
- 如何实现验证两次输入的密码是否一致
- js如何获取键盘输入的值来比较两次输入密码是否一样
- angularjs自定义指令检验两次输入的密码是否一致
- 修改密码,验证两次输入是否相同,相同才能提交
- jQuery如何验证两次输入的密码是否一致
- JSP注册用AJax无刷新判断用户名是否被占用,并且判断两次密码输入是否一致
- angularjs表单验证,包括密码长度及两次密码输入是否一致
- js中常用到的验证,长度限制,验证油箱格式,两次输入密码是否相同
- JavaScript验证两次输入密码是否相同
- 注册判断两次输入的密码是否一致
- easyUI验证表单两次密码是否相同
- 校验输入的两次密码是否一致的问题
- js验证input不为空且两次输入密码相同
- WPF 登陆界面判断输入的用户名和密码是否与数据库中保存的数据相同
- JavaScript split() 方法加上哈希函数实现表单输入框内容是否重复的判断
- easyUI Form表单的密码验证是否相同
- play frameword 如何实现在页面表单效验用户名是否存在