表单验证（JQ）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
form{
width: 750px;
margin: 200px auto;
}
td{
padding: 10px 3px;
}
input[name^="sub"]{
height: 20px;
width:40px;
margin: 0px 130px;
}
div{
color: red;
font-size:15px;
}
.code{
margin-left: 15px;
padding: 2px;
border:1px solid black;
cursor: pointer;
}
</style>
</head>
<body>
<form action="#" onsubmit="return verify()">
<table>
<tr>
<td>用 户 名：</td>
<td><input type="text" name="user" placeholder="6-12位英文或数字组成"></td>
<td><div></div></td>
</tr>
<tr>
<td>密 码：</td>
<td><input type="password" name="pswd" placeholder="随意"></td>
<td><div></div></td>
</tr>
<tr>
<td>重 复 密 码：</td>
<td><input type="password" name="pswd2" placeholder="随意，但是要和上面一样"></td>
<td><div></div></td>
</tr>
<tr>
<td>邮 箱：</td>
<td><input type="text" name="email" placeholder="XX@XX.XX"></td>
<td><div></div></td>
</tr>
<tr>
<td>手 机 号：</td>
<td><input type="text" name="phone" placeholder="11位手机号"></td>
<td><div></div></td>
</tr>
<tr>
<td>验 证 码：</td>
<td><input type="text" name="code" placeholder="请输入验证码"></td>
<td><div></div></td><br>
<td><span class="code" onclick="code()"></span></td>
</tr>
</table>
<input type="submit" name="sub" value="注册">
</form> <script type="text/javascript">
var flag = true;
var code_4 = '';
code();
$('form input').on({
'focus':function(){
$(this).parent().next().children().text('');//选中相应的input后对应的div/span内容消失（）
},
'blur':function(){
flag = true; //每次失去焦点开始判定前重置flag的布尔值，否则当第一次flag被赋值为false后再次失去焦点后各input的if判断皆为turn也无法改变flag的值
if ($(this).attr('name') == 'user' && !/^[0-9a-zA-Z]{6,12}$/gi.test(this.value)) {
$(this).parent().next().children().text('用户名不合法');
flag = false;
}else if($(this).attr('name') == 'pswd2' && $(this).val()!=$("input[name='pswd']").val()){
$(this).parent().next().children().text('两次输入密码不一致');
flag = false;
}else if($(this).attr('name') == 'email' && !/^[0-9a-zA-Z]{1,}@[0-9a-zA-Z]{1,}\.[0-9a-zA-Z]{1,6}$/gi.test(this.value)){
$(this).parent().next().children().text('邮箱不合法');
flag = false;
}else if($(this).attr('name') == 'phone' && !/^[0-9a-zA-Z]{11}$/gi.test(this.value)){
$(this).parent().next().children().text('手机号不合法');
flag = false;
}else if($(this).attr('name') == 'code' && this.value.toLocaleUpperCase()!=code_4.toLocaleUpperCase()){//根据用户输入的值和验证码值的大小写统一来确定是否相同
$(this).parent().next().children().text('请输入正确的验证码');
flag = false;
}else if($("input[name='pswd2']").val()==$("input[name='pswd']").val()){//用来解决当第二密码输入不同，改变第一密码使和第二密码相同后失去焦点第二密码后div内容不改变的问题
$("input[name='pswd2']").parent().next().children().text('');
}
}
})
function verify(){ //返回给form表单true或false
$("form input").each(function(){
if ($(this).val() == '') { //检测input内容是否有空，有空的input旁的span内容添加：不能为空
$(this).parent().next().children().text('不能为空');
flag = false;
}
})
return flag;
}
function code(){ //验证码
var carr = ["0","1","2","3","4","5","6","7","8","9","q","w","e","r","t","y","u","i","o","p","a","s","d","f","g","h","j","k","l","z","x","c","v","b","n","m","Q","W","E","R","T","Y","U","I","O","P","A","S","D","F","G","H","J","K","L","Z","X","C","V","B","N","M"];
for(var i=0;i<4;i++){
code_4 += carr[Math.floor(Math.random()*carr.length)];
}
$('.code').text(code_4);
}
</script>
</body>
</html>
表单验证（JQ）的更多相关文章
- 表单验证jq.validate.js
源代码--demo Validate:function(){ var me=this; var $form = $('#form'); //添加自定义方法: 同时验证手机和座机电话 jQuery ...
- jq中的表单验证插件------jquery.validate
今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使 ...
- 登陆jq表单验证及jqcookie记住密码实例
<p><%@ page contentType="text/html; charset=utf-8"%> <%@taglib prefix=" ...
- 模态框的理解 ,jQ: loading,进度条, 省级联动 表单验证 插件
模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: $('#box').ajax ...
- 表单验证插件----jquery validation
1.下载地址:http://jqueryvalidation.org/ 2.使用方法: <script type="text/javascript" src="ht ...
- atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证
atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表 ...
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
- Day17 表单验证、滚动菜单、WEB框架
一.表单验证的两种实现方式 1.DOM绑定 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- atittit.表单验证性质的原则和实施，以及选择和定义自己的兼容easyui dsl窗体身份验证规则
atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单 ...
随机推荐
- null 和 undefined 区别
---恢复内容开始--- 1.在javascipt中,将一个变量赋值为undefined 或 null ,几乎没什么区别. 2. 在if语句中undefined 和 null 都会被自动转成fals ...
- Vue2.0+Node.js+MongoDB全栈打造商城系统
vue.js +axios mock数据 在main.js中 import axios from 'axios' Vue.prototype.$ajax = axios webpack.dev.con ...
- 获取cookie信息
随着网络安全(例如:登录安全等)要求的不断提升,越来越多的登录应用在登录时添加了验证码登录,而验证码生成算法也在不断的进化,因而对含登录态的自动化测试脚本运行造成了一定程度的困扰,目前解决此种问题的方 ...
- selendroid之inspector
http://selendroid.io/inspector.html 寻找元素.断点模式.
- spring---FactoryBean与BeanFactory的区别
1.BeanFactory BeanFactory是IOC最基本的容器,负责生产和管理bean,它为其他具体的IOC容器提供了最基本的规范,例如DefaultListableBeanFactory, ...
- 【NLP_Stanford课堂】句子切分
依照什么切分句子——标点符号 无歧义的:!?等 存在歧义的:. 英文中的.不止表示句号,也可能出现在句子中间,比如缩写Dr. 或者数字里的小数点4.3 解决方法:建立一个二元分类器: 检查“.” 判断 ...
- 多设备同时安装apk（安卓）
前几天在做安卓设备的多个设备同时安装的小脚本.因为目前我这边设备有点多,想顺便做一下安装的测试.而且因为公司的app测试人手上有点不足,就想通过这个办法去在安装的时候更方便省事一点. 本来是想弄个复杂 ...
- 技术blog
看到好多人都写技术blog,发现自己工作了快两年居然都没有写过blog,很是惭愧,遂从今天开始不定期更新技术体验,主要是为了记下自己学习摸索技术过程中的经验以及问题解决方案.
- [原]Machine Learing 入门 —— 开门第0篇
一.最近懒了 7月没怎么写博客,倒是一直在学Machine Learning的入门知识,在这里给大家推荐一个不错的自学网站:https://www.coursera.org/ ,Andrew Ng是联 ...
- ABAP OPEN SQL里OPEN CURSOR和SELECT的比较
OPEN CURSOR After the OPEN CURSOR statement, the database cursor is positioned in front of the first ...