jQuery验证所有输入合法后才干提交
大学三年里所有在专注后台编码。学会不知多少种，servlet。ssh，springMVC，web.py......
最后每次碰到前端自己要写点东西就满目愁抑，
干脆自己好好理解一段前端代码，
特地拿出參考别人的一个可用的jQuery验证表单输入。
总体来说还是很easy。了解focus、blur的使用方法就足够，以后自己要填加一些更麻烦的前端jQuery组件运用。
下面代码參考搜索：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Reg</title>
<script src="jquery-2.1.0.min.js"></script> <style>
.state1{
color:#aaa;
}
.state2{
color:#000;
}
.state3{
color:red;
}
.state4{
color:green;
}
</style> <script>
$(function(){ var ok1=false;
var ok2=false;
var ok3=false;
var ok4=false;
// 验证username
$('input[name="username"]').focus(function(){ //focus()是获得焦点时对应的处理函数
$(this).next().text('username应该为3-20位之间').removeClass('state1').addClass('state2'); //$(this).next()当前元素同级的下个元素
}).blur(function(){ //元素失去焦点前触发blur函数
if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){
$(this).next().text('输入成功').removeClass('state1').addClass('state4');
ok1=true;
}else{
$(this).next().text('username应该为3-20位之间').removeClass('state1').addClass('state3');
} }); //验证password
$('input[name="password"]').focus(function(){
$(this).next().text('password应该为6-20位之间').removeClass('state1').addClass('state2');
}).blur(function(){
if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){
$(this).next().text('输入成功').removeClass('state1').addClass('state4');
ok2=true;
}else{
$(this).next().text('password应该为6-20位之间').removeClass('state1').addClass('state3');
} }); //验证确认password
$('input[name="repass"]').focus(function(){
$(this).next().text('输入的确认password要和上面的password一致,规则也要同样').removeClass('state1').addClass('state2');
}).blur(function(){
if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){
$(this).next().text('输入成功').removeClass('state1').addClass('state4');
ok3=true;
}else{
$(this).next().text('输入的确认password要和上面的password一致,规则也要同样').removeClass('state1').addClass('state3');
} }); //验证邮箱
$('input[name="email"]').focus(function(){
$(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state2');
}).blur(function(){
if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
$(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3');
}else{
$(this).next().text('输入成功').removeClass('state1').addClass('state4');
ok4=true;
} }); //提交button,全部验证通过方可提交 $('.submit').click(function(){
if(ok1 && ok2 && ok3 && ok4){
$('form').submit();
}else{
return false;
}
}); });
</script>
</head>
<body> <form action='do.php' method='post' >
用 户 名:<input type="text" name="username">
<span class='state1'>请输入username</span><br/><br/>
密 码:<input type="password" name="password">
<span class='state1'>请输入password</span><br/><br/>
确认password:<input type="password" name="repass">
<span class='state1'>请输入确认password</span><br/><br/>
邮 箱:<input type="text" name="email">
<span class='state1'>请输入邮箱</span><br/><br/>
<a href="javascript:;"><img class='submit' />提交</a>
</form>
</body>
jQuery验证所有输入合法后才干提交的更多相关文章
- JQuery验证成功之后，使用ajax提交数据
function checkForm(){ validator = $("#commentForm").validate({// #formId为需要进行验证的表单ID error ...
- jquery验证后ajax提交，返回消息怎样统一显示的问题
/* jquery验证后ajax提交.返回消息怎样跟jquery验证体系统一显示的问题,网上查了非常多资料.都没有找到明白的答案,通过数小时的尝试,最终攻克了,现举一个简单的样例,给须要的人參考參考吧 ...
- Thinkphp+AJAX动态验证用户输入是否合法
遇到用户注冊等情况时.假设等用户输入全部信息,点击注冊button提交后.再验证输入是否正确,体验非常不好,并且非常浪费用户的时间,添加注冊成本,这里提供一个样例,演示了怎么使用ajax进行单步验证, ...
- AngularJS 表单提交后显示验证信息与失焦后显示验证信息
虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...
- JS实现的一个验证码，可以在前端验证后在提交action
js实现的一个验证码功能,可以在前端判断验证码输入是否正确 输入的邮箱格式是否正确 验证成功后才提交action到后台 <!DOCTYPE html PUBLIC "-//W3C//D ...
- 使用 jQuery Ajax 异步登录，并验证用户输入信息（maven）
使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...
- jQuery validation学习（1）验证只输入空格通过验证
当input输入了空格是不会提示信息的 一般会去除空格然后进行验证 这个时候就要添加onkeyup事件去除左侧的空格 验证只输入空格通过验证 //添加验证手机方法 jQuery.validator.a ...
- jQuery验证控件jquery.validate.js使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- 你应该了解的jquery 验证框架
Jquery validate 验证 具体查看附件中demo 主要是几种使用形式: 1.写在js中: $("#signupForm").validate({ rules: { fi ...
随机推荐
- Linux - Nginx配置反向代理。
Nginx配置反向代理. 准备两台服务器 http://192.168.70.66 http://192.168.70.62 设置正则匹配(192.168.70.66) vim /usr/local/ ...
- 分布式系统CAP原则与BASE思想
一.CAP原则 CAP原则又称CAP定理,指的是在一个分布式系统中, Consistency(一致性). Availability(可用性).Partition tolerance(分区容错性),三者 ...
- C++_class_powerpoint_1.1
Types and Declarations Boolean Type bool type – boolean , logic type bool literal – true, falseint a ...
- 【BZOJ3218】【UOJ#77】a + b Problem
题目 题目在这里 思路&做法 明显的最小割(其实是之前做过一道类似的题) S向每一个格子连容量为\(b_i\)的边 每一个格子向T连容量为\(w_i\)的边 对于格子\(i\)向满足条件的格子 ...
- 第6章 服务模式 在 .NET 中实现 Service Gateway（服务网关）
上下文 您正在设计企业应用程序,该程序需要使用由其他应用程序提供的服务.该服务定义了一个合约,所有服务使用者要访问该服务都必须遵守该合约.该合约定义了与此服务通信所需的技术.通信协议和消息定义等内容. ...
- ItemArray DataRow对象的RowState和DataRowVersion属性特点
DataTable.Rows[i].ItemArray DataTable.Rows表示所有行的集合DataTable.Rows[i]加上下标表示其中某一行DataTable.Rows[i].Item ...
- 图片全屏轮播插件poposlides
jQuery轻量级全屏自适应焦点图插件poposlides 在线演示本地下载
- AVD的Hardware选项
最近学习开发游戏,需要GLES2.0使用,使用Android虚拟机调试一直报错闪退.百度说Android 4.0及以后的版本[使用API15及以上]),已经支持GLES2.0,需要在HardWare选 ...
- 信息检索及DM必备知识总结：luncene
原文链接:http://blog.csdn.net/htw2012/article/details/17734529 有少量修改!如有疑问,请访问原作者. 一:信息检索领域: 信息检索和网络数据领域( ...
- RabbitMQ学习之基于spring-rabbitmq的RPC远程调用
http://blog.csdn.net/zhu_tianwei/article/details/40920985 spring-rabbitmq中实现远程接口调用,主要在com.rabbitmq.s ...