jQuery 让表单验证通过方可提交实例讲解

网友投稿 300 2024-06-14

jQuery 让表单验证通过方可提交实例讲解

本文主要为大家详细介绍了jquery实现表单验证，所有验证通过方可提交，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Reg</title>

<style>

.state1{

color:#aaa;

}

.state2{

color:#000;

}

.state3{

color:red;

}

.state4{

color:green;

}

</style>

<script src="jquery.js"></script>

<script>

$(function(){

var ok1=false;

var ok2=false;

var ok3=false;

var ok4=false;

// 验证用户名

$(&#39;input[name="username"]&#39;).focus(function(){

$(this).next().text(&#39;用户名应该为3-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);

}).blur(function(){

if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=&#39;&#39;){

$(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);

ok1=true;

}else{

$(this).next().text(&#39;用户名应该为3-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);

}

});

//验证密码

$(&#39;input[name="password"]&#39;).focus(function(){

$(this).next().text(&#39;密码应该为6-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);

}).blur(function(){

if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=&#39;&#39;){

$(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);

ok2=true;

}else{

$(this).next().text(&#39;密码应该为6-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);

}

});

//验证确认密码

$(&#39;input[name="repass"]&#39;).focus(function(){

$(this).next().text(&#39;输入的确认密码要和上面的密码一致,规则也要相同&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);

}).blur(function(){

if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=&#39;&#39; && $(this).val() == $(&#39;input[name="password"]&#39;).val()){

$(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);

ok3=true;

}else{

$(this).next().text(&#39;输入的确认密码要和上面的密码一致,规则也要相同&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);

}

});

//验证邮箱

$(&#39;input[name="email"]&#39;).focus(function(){

$(this).next().text(&#39;请输入正确的EMAIL格式&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);

}).blur(function(){

if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){

$(this).next().text(&#39;请输入正确的EMAIL格式&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);

}else{    

$(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);

ok4=true;

}

});

//提交按钮,所有验证通过方可提交

$(&#39;.submit&#39;).click(function(){

if(ok1 && ok2 && ok3 && ok4){

$(&#39;form&#39;).submit();

}else{

return false;

}

});

});

</script>

</head>

<body>

<form action=&#39;do.php&#39; method=&#39;post&#39; >

用 户 名:<input type="text" name="username">

<span class=&#39;state1&#39;>请输入用户名</span><br/><br/>

密　　码:<input type="password" name="password">

<span class=&#39;state1&#39;>请输入密码</span><br/><br/>

确认密码:<input type="password" name="repass">

<span class=&#39;state1&#39;>请输入确认密码</span><br/><br/>

邮　　箱:<input type="text" name="email">

<span class=&#39;state1&#39;>请输入邮箱</span><br/><br/>

<a href="javascript:;" rel="external nofollow" ><img  class=&#39;submit&#39; type=&#39;image&#39; src=&#39;./images/reg.gif&#39; / alt="jQuery实现所有验证通过方可提交的表单实例讲解" ></a>

</form>

</body>

</html>

-

相关推荐：

JS基于正则表达式实现的密码强度验证功能示例_javascript技巧

Vue和Flask实现简单的登录验证跳转

JS实现的简单表单验证功能示例

以上就是jQuery实现所有验证通过方可提交的表单实例讲解的详细内容

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：实例 正则表达式 输入 java js
上一篇:用 JS 库解决小程序跨页传消息和数据
下一篇:申请搭建小程序的方法
相关文章

 发表评论

暂时没有评论，来抢沙发吧~