表单验证（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. 表单 ...
随机推荐
- pId的数据结构转children 数据结构(JS)；
在工作中经常遇到需要把带有pId的的list数据转换为children格式的树形结构,一直都没有找到太好的工具函数.偶然间看到了这个函数,研究了下,感觉这个函数很强大,所以记录下来,作为备用,同时也贴 ...
- 今日头条极速版邀请码以及其它APP邀请码大全
现在大多手机新闻APP都需要输入码,在网上找了很久,最终找到一个比较全的文章,本人试过,都是可以使用的! 第1个比较好,可边看新闻,边收益!嘻嘻!平时写代码累了,休息刷一下!或者在睡觉前刷新一下,每天 ...
- EPS 转 pdf 在线
EPS 转 pdf 在线网站 https://convertio.co/zh/eps-pdf/
- 用Webstorm 运行React-native 工程时，出错：xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
解决方法:在 终端执行如下命令 sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/ 注意:前提是你已经安装了xcode
- Excel VBA 复制
将 Sheet1 复制到 Sheet3 后面时,实现方法如下: Worksheets("Sheet1").Copy After:=Worksheets("Sheet3&q ...
- 调试一个Ext打开的window窗口内嵌Iframe的form提交问题
一个奇怪的问题是:潜逃在iframe里的页面单独提交都是正常,放到iframe里面通过js调用在parent页面.提交总是被莫名其妙的杀掉. 确定js简单无错之后,继续看parent的处理逻辑,有这么 ...
- Windows装系统
这几天电脑频繁崩溃,自己尝试着装了几次系统,遇到一些问题.有的解决了,有的没解决.将其一一记录在这里,作为经验参考. 自己以前最常用的方式是直接通过ultraiso将IOS文件解压到到U盘,会将U盘做 ...
- USB3.0驱动与2.0有什么区别
安装好usb3.0驱动就可以驱动usb 3.0设备,能够适应于大部份主板,帮助用户解决usb3.0和电脑无法正常通讯的问题,并支持winxp,win7和win8系统,是目前网络上最好用的usb3.0万 ...
- diskpart分区
分区知识充电: 主分区:主分区,也称为主磁盘分区,和拓展分区.逻辑分区一样,是一种分区类型.主分区中不能再划分其他类型的分区,因此每个主分区都相当于一个逻辑磁(在这一点上主分区和逻辑分区很相似,但主分 ...
- CSS基础语法(二) CSS的9种选择器
样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性 .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元素 #id值{ … } 3.标签选择器 ...