表单验证（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. 表单 ...
随机推荐
- 关于window的端口查看及tomcat的端口修改问题
1.Windows平台 在windows命令行窗口下执行: 1.查看所有的端口占用情况 C:\>netstat -ano 协议 本地地址 外部地址 ...
- CSS3嵌入字体
@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体.语法: 例子:
- oracle查询时间
oracle查询和时间有关的命令: 方法一:select * from dual where time between to_date('2012-06-18 00:00:00','yyyy-mm-d ...
- sqlserver学习2---java执行存储过程
一.存储过程 1.新增操作存储过程 --------------1.新建 增加学生的存储过程---------------------------- set IDENTITY_INSERT stude ...
- Shell脚本批量修改图片尺寸
#!/bin/sh function scandir(){ local cur_dir parent_dir workdir workdir=$ cd ${workdir} if [ ${workdi ...
- 模拟精灵 z
反复做历史测试,重大改进了卖出的判断模式.此项改进能使系统收益每年增加5%-左右 重新整合了几种买法,使之在熊市更加谨慎.对大盘的反转反应更为灵敏 适当加大了仓位 单独处理有重大机会的股票 加入多种短 ...
- ORACLE_DELETE
SQL DELETE Statement The SQL DELETE Statement The DELETE statement is used to delete existing record ...
- Orchard core 中文文档翻译系列
本系列翻译顺序完全参照 官方顺序 原文地址:https://orchardcore.readthedocs.io/en/latest/ Orchard Core 中文文档翻译(一)关于Orchard ...
- typescript 添加基础类型的扩展方法
以时间转换为案例: //声明接口,也是在声明date这个基础类型要定义一个format的扩展方法,不写接口声明会报错 interface Date { Format(fmt:string):strin ...
- lua 语句学习
就如同C里的if else,while,do,repeat.就看lua里怎么用: 1.首先看if else t = {1,2,3} local i = 1 if t[i] and t[i] % 2 = ...