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 ...
随机推荐
- DDos攻击的一些领域知识——（流量模型针对稳定业务比较有效）不稳定业务采用流量成本的检测算法，攻击发生的时候网络中各个协议的占比发生了明显的变化
在过去,很多防火墙对于DDoS攻击的检测一般是基于一个预先设定的流量阈值,超过一定的阈值,则会产生告警事件,做的细一些的可能会针对不同的流量特征设置不同的告警曲线,这样当某种攻击突然出现的时候,比如S ...
- [Algorithm]扔杯问题
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- QlikSense移动端使用攻略
公司内部署QlikSense服务器,除了在电脑上用浏览器访问,也可以在移动端进行访问. 移动端访问在如下网址有英文详细介绍:https://community.qlik.com/docs/DOC-19 ...
- mysql在第一次查询的时候很慢，第二次查询就比较快的原因？
1.默认 query_cache 是打开的 你使用 show global variables like '%query_cache%'; 确认一下有没有打开,如果打开了.第一次查询读数据文件,第二次 ...
- 试图ddms 如果丢失adv链接解决办法！
点击如下图菜单 重启链接adv即可显示.
- jquery.reveal弹出框
一款js弹出框,嵌入其它页面: 引用: <script src="../../js/jquery.reveal.js" type="text/javascript ...
- RedHat/CentOS 手动挂载磁盘
#创建挂载目录mkdir /mnt/sdamkdir /mnt/sdbmkdir /mnt/sdcmkdir /mnt/sddmkdir /mnt/sdemkdir /mnt/sdfmkdir /mn ...
- 5 Python+Selenium的元素定位方法（xpath）
[环境] Python3.6+selenium3.0.2+FireFox50+win7 [定位方法] 1.方法:find_element_by_xpath('') 说明:xpath定位方法有相对路径和 ...
- 检索源码 删除无用Properties的小工具
背景: 重新做项目的过程中,引用了大量旧代码.尤其是Properties文件,里面肯定有一批是无用的,干脆笨办法直接扫描源码文件来过滤. 后续在此基础上修改修改,再做个扫描无用image文件的类. 代 ...
- cordova 打包工具
一.环境安装 1.安装NodeJs https://nodejs.org 直接去官网下载并按默认路径安装就可以了. 安装完成后在命令行: (测试成功!) $ npm 2.安装Cordova 命令行 ...