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 ...
随机推荐
- 写一个类似淘宝的ios app需要用到哪些技术？
写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...
- hdu 1002（大数）
A + B Problem II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- angular里使用vue/vue组件怎么在angular里用
欢迎加入前端交流群交流知识&&获取视频资料:749539640 如何在angularjs(1)中使用vue参考: https://medium.com/@graphicbeacon/h ...
- Python笔记（十一）——数据抓取例子
上班时候想看股票行情怎么办?试试这个小例子,5分钟拉去一次股票价格,预警: #coding=utf-8 import re import urllib2 import time import thre ...
- Datatable筛选数据
DataRow[] drArr = dt.Select("C1=’abc’");//查询 还可以这样操作: DataRow[] drArr = dt.Select("C1 ...
- KAFKA 调优
KAFKA 调优 最近要对kafka集群做调优,就在网上看了些资料,总结如下. 我们的kafka版本是0.10.1.0. 机器配置是40G内存,300G硬盘. 一共有3台机器组成一个小的集群. Kak ...
- P1304 哥德巴赫猜想
题目描述 输入N(N<=10000),验证4~N所有偶数是否符合哥德巴赫猜想. (N为偶数). 如果一个数,例如10,则输出第一个加数相比其他解法最小的方案.如10=3+7=5+5,则10=5+ ...
- JavaWeb详细学习路线图
- Java攻城狮学习路线 - 图转自网络.
- Javassist介绍
要想将编译时不存在的类在运行时动态创建并加载,通常有两种策略: 1. 动态编译 2. 动态生成二进制字节码(.class) 对于第二种策略,实际上已经有诸多比较成熟的开源项目提供支持,如CGLib.A ...
- CorelDRAW X6、X7&2018，500现金返利等你拿！
购物狂欢节要来了,你准备好了么? 不知何时起,四根神棍的日子却成了大家拼爹.拼钱包.拼手速.拼网速.拼钱包...各种火拼日子 你是从哪年关注并重视双11的,记得小编我第一次邂逅双11真的只是凑凑热闹 ...