表单验证（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. 表单 ...
随机推荐
- html5格式样式
<b> 加粗 <b style="font-size: 100px;">大字体</b>
- show与ShowDialog substring
substring public String substring(int beginIndex, int endIndex) 返回一个新字符串,它是此字符串的一个子字符串.该子字符串从指定的 beg ...
- AJAX 学习笔记 2017_05_04
1.使用 AJAX 修改该文本内容 <%@ page language="java" contentType="text/html; charset=UTF-8&q ...
- pip下载太慢解决方法
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple/ --upgrade tensorflow 用清华的镜像下载会快很多.
- listview加载显示图片
public class ImageAndTextListAdapter extends ArrayAdapter<ImageAndText> { private ListView lis ...
- 【[TJOI2007]可爱的质数】
题目 用一道板子题来复习一下\(bsgs\) \(bsgs\)用于求解形如 \[a^x\equiv b(mod\ p)\] 这样的高次不定方程 由于费马小定理的存在,我们可是直接暴力扫一遍\(p\), ...
- Educational Codeforces Round 53 (Rated for Div. 2) C. Vasya and Robot 【二分 + 尺取】
任意门:http://codeforces.com/contest/1073/problem/C C. Vasya and Robot time limit per test 1 second mem ...
- 2018中国大学生程序设计竞赛 - 网络选拔赛 1010 YJJ's Salesman 【离散化+树状数组维护区间最大值】
题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6447 YJJ's Salesman Time Limit: 4000/2000 MS (Java/O ...
- 【洛谷P1196】[NOI2002]银河英雄传说
银河英雄传说 题目链接 并查集时记录下以i为首的队列的长度(如果存在这个队列)num[i],便于合并, 和点i到队首的距离front[i],便于查询(在find时维护) #include<ios ...
- 【luogu P1536 村村通】 题解
题目链接:https://www.luogu.org/problemnew/show/P1536 并查集的运用,可以用生成树的思想,就是n个点生成一棵树需要n-1条边.这样我们先把已有的路连接到一个并 ...