表单验证（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. 表单 ...
随机推荐
- 提取url中参数的方法（转换成json格式）
还是直接上代码吧. //将url中的参数获取到并抓换成json格式 function serilizeUrl(url){ var urlObject={}; //1.正则匹配是不是以?结尾 if(/\ ...
- js原生拖拽
style样式 <style type="text/css"> #box{ width: 100px; height: 100px; background: deepp ...
- Linux虚拟系统安装——Ubuntu18.04 & CentOS6.5
Linux虚拟系统安装--Ubuntu18.04 & CentOS6.5 摘要:Linux简介.虚拟系统安装.系统备份与文件介绍 1. Linux简介 (1)1968年,MIT.Bell实验室 ...
- 使用Unicode写文本文件：一个简单类的示例
参考了http://forums.codeguru.com/showthread.php?457106-Unicode-text-file示例. class WOFSTREAM : public st ...
- 华为OJ-表示数字
要求:将一个字符中所有出现的数字前后加上符号"*",其他字符保持不变 #include<iostream> #include<string> using n ...
- nginx http强制跳转https
通过nginx的rewrite 进行301永久重定向,参考如下配置即可. server { listen 192.168.1.111:80; server_name test.com; rewrit ...
- XP环境安装request包报错：离线安装packages: certifi urllib3 idna chardet
分别下载 request certifi urllib3 idna chardet 安装包 数据包下载地址:https://pypi.org/ 解压到python安装目录 使用cmd命令进入..\py ...
- IIS环境搭建
IIS环境搭建 IIS环境搭建首先是建立在一个干净的.无毒的系统上,再进行相应操作.本文用到的是windows 2003的镜像文件,有条件的用户也可以使用windows的系统安装光盘. 下面进入操作步 ...
- 【[SDOI2008]洞穴勘测】
题目 由于始终保证连通性于是我们可以用\(LCT\)来维护这个森林 三个操作分别是\(link,cut,findroot\) 代码 #include<iostream> #include& ...
- Netbackup客户端安装网络放通端口需求，及测试网络放通方法
192.168.1.101网络放通需求如下: 客户端主机 192.168.1.101 到 服务端主机 192.168.1.100 的1556.13720.13724.1378.13782这5个 ...