用户注册信息的验证不止需要验证用户名是否已经存在，还有其他的验证，比如不能为空、字符长度控制，而且所有输入框都要验证，这么多的条件满足后才能提交，用Jquery该如何实现呢。
比较简单，也没有啥好说的，直接上代码吧。
- <script type="text/javascript">
- $(document).ready(function(){
- var okemail = false;
- var okname = false;
- var okpassword1 = false;
- var okpassword2 = false;
- $("#password1").focus(function(){
- $("#password1span").html("密码应在6-20位之间");
- }).blur(function(){
- var password1 = $("#password1").val();
- if(password1.length >= 6 && password1.length <=20 && password1!=''){
- $("#password1span").html("<b>输入成功</b>");
- okpassword1=true;
- }else{
- $("#password1span").html("<b>密码应在6-20位之间</b>");
- }
- });
- $("#password2").focus(function(){
- $("#password2span").html("请和上次密码相同");
- }).blur(function(){
- var password2 = $("#password2").val();
- var password1 = $("#password1").val();
- if(password2.length >= 6 && password2.length <=20 && password2!='' && password2 == password1){
- $("#password2span").html("<b>验证成功</b>");
- okpassword2=true;
- }else{
- $("#password2span").html("<b>请和第一次输入密码相同</b>");
- }
- });
-
- $("#name").focus(function(){
- $("#namespan").html("用户名应在3-12位之间");
- }).blur(function(){
- var username = $("#name").val();
-
- $.ajax({
- async: false, //默认为true，即请求为异步请求
- timeout:5000, //设置请求超时时间（毫秒）
- dataType:"json", //返回的数据类型
- type: "post", //设置请求方式
- url: "test", //设置请求URL
- data: "word=name&username="+username, //设置传递的参数值
- success:function(msg){ //设置响应成功之后执行的回调函数
- if(username.length >= 3 && username.length <=12 && username!=''){
- /* $("#namespan").html(""); */
- if(msg.existName==true){
- $("#namespan").html("<b>名称可用</b>");
- }else{
- $("#namespan").html("<b>名称已被使用，换一个</b>");
- }
- }else{
- $("#namespan").html("<b>用户名应在3-12位之间</b>");
- }
- },
- error:function(){ //设置响应失败之后执行的回调函数
- alert("失败喽");
- }
- });
- });
- //-----------------------------------------------------------------------------------------------
- $("#mail").focus(function(){
- $("#em").html("邮箱不能为空，");
- }).blur(function(){
- //获取邮箱地址
- var em = $("#mail").val();
-
- $.ajax({
- async: false, //默认为true，即请求为异步请求
- timeout:5000, //设置请求超时时间（毫秒）
- dataType:"json", //返回的数据类型
- type: "post", //设置请求方式
- url: "test", //设置请求URL
- data: "word=email&email="+em, //设置传递的参数值
- success:function(msg){ //设置响应成功之后执行的回调函数
- if(msg.existEmail==true){
- $("#em").html("<b>邮箱未被注册，可以使用</b>");
- okemail = true;
- }else{
- $("#em").html("<b>邮箱已被注册，换一个</b>");
- }
- },
- error:function(){ //设置响应失败之后执行的回调函数
- alert("失败喽");
- }
- });
- if(em.search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
- $("#em").html("请输入正确的邮箱格式");
- }
- });
- //------------------------------------------------------------------------------------------------------
- $('#submit').click(function(){
- if(okemail && okname && okpassword1 &&okpassword2){
- $('form').submit();
- }else{
- return false;
- }
- });
-
- });
- </script>
html代码如下：
- 注册<br/>
- <form action="user?action=register" method="post">
- 用户名<input type="text" name="username" id="name" ><span id="namespan"> </span><br/>
- 密码<input type="password" name="passwd" id="password1"> <span id="password1span"></span> <br/>
- 确认密码<input type="password" name="passwd2" id="password2"> <span id="password2span"></span> <br/>
- 邮箱<input type="text" name="email" id="mail"><span id="em"> </span> <br/>
- <input type="submit" id="submit" value="注册"/>
- </form>
这样就ok了。
来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/29876573/viewspace-1838552/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/29876573/viewspace-1838552/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
