Jquery 实现表单验证,所有验证通过方可提交
Freigeben: 2016-07-25 08:50:03
Original
1084 Leute haben es durchsucht
小小测试
-
-
-
- Reg
-
-
- <script><li> $(function(){<li><li> var ok1=false;<li> var ok2=false;<li> var ok3=false;<li> var ok4=false;<li> // 验证用户名<li> $('input[name="username"]').focus(function(){<li> $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state2');<li> }).blur(function(){<li> if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){<li> $(this).next().text('输入成功').removeClass('state1').addClass('state4');<li> ok1=true;<li> }else{<li> $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state3');<li> }<li> <li> });<li><li> //验证密码<li> $('input[name="password"]').focus(function(){<li> $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state2');<li> }).blur(function(){<li> if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){<li> $(this).next().text('输入成功').removeClass('state1').addClass('state4');<li> ok2=true;<li> }else{<li> $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state3');<li> }<li> <li> });<li><li> //验证确认密码<li> $('input[name="repass"]').focus(function(){<li> $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state2');<li> }).blur(function(){<li> if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){<li> $(this).next().text('输入成功').removeClass('state1').addClass('state4');<li> ok3=true;<li> }else{<li> $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state3');<li> }<li> <li> });<li><li> //验证邮箱<li> $('input[name="email"]').focus(function(){<li> $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state2');<li> }).blur(function(){<li> if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){<li> $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3');<li> }else{ <li> $(this).next().text('输入成功').removeClass('state1').addClass('state4');<li> ok4=true;<li> }<li> <li> });<li><li> //提交按钮,所有验证通过方可提交<li><li> $('.submit').click(function(){<li> if(ok1 && ok2 && ok3 && ok4){<li> $('form').submit();<li> }else{<li> return false;<li> }<li> });<li> <li> });<li> </script>
-
-
-
-
-
复制代码
|
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31