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 ...
随机推荐
- Dungeon Master hdoj
Dungeon Master Time Limit : 2000/1000ms (Java/Other) Memory Limit : 131072/65536K (Java/Other) Tot ...
- 南海区行政审批管理系统接口规范v0.3（规划）
1. 会话API 1.1. login [登录验证] {"r_code":"500","r_msg":"操作失败",&q ...
- Linux Shell Scripting Cookbook 读书笔记 5
sed,awk 1. sed (string editor) 使用-i可以将结果运用于原文件 sed 's/text1/text2/' file > newfile mv newfile fil ...
- POJ 1442 Treap模板
// by SiriusRen #include <cstdio> #include <cstring> #include <algorithm> using na ...
- 从 Zero 到 Hero ，一文掌握 Python--转
https://www.oschina.net/translate/learning-python-from-zero-to-hero 第一个问题,什么是 Python ?根据 Python 之父 G ...
- jumpserver install
本文来源jumpserver官网 一步一步安装 环境 系统: CentOS 7 IP: 192.168.244.144 关闭 selinux 和防火墙 # CentOS 7 $ setenforce ...
- Java基础6一面向对象
面向对象的编程思想:是以事物的整体的为基本单位,从事物的属性和行为两个方面进行描述. 特点: Java来源于生活服务于生活 用面向对象的思想能够接近正常的思维方式. 面向对象语言中有设计模式一说. 在 ...
- (转）Bootstrap 之 Metronic 模板的学习之路 - （6）自定义和扩展
https://segmentfault.com/a/1190000006815041 前面我们将 Metronic 的结构和源码大致浏览了一遍,Metronic 整个文件包有三百多兆,在实际项目中, ...
- Swift - what's the difference between metatype .Type and .self?
Declaration typealias AnyClass = AnyObject.Type .Type The metatype of a class, structure, or enumera ...
- buddyinfo 内存碎片数据采集
不说了,上工具 #cat buddyinfo.sh #!/bin/sh #*************************************************************** ...