jQuery formValidator表单验证


Posted in Javascript onJanuary 07, 2016

作为一名程序员,在解决工作中遇到问题之后,做一些总结是有必要的,既方便总结温习相关知识点,也为广大的程序员提供了一些工作经历,给予同行一面明鉴.

html部分:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formValidator</title>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/formValidator-4.0.1.min.js"></script>
<script src="js/DateTimeMask.js"></script>
<script src="js/formValidatorRegex.js"></script>
<link rel="stylesheet" href="css/validator.css">
<style>
form{
width: 500px;
margin: 100px auto;
}
table tr td:first-child{
text-align: right;
}
table tr td{
padding: 5px 0;
}
div{
margin-left: 10px;
padding: 0 10px;
}
</style>
</head>
<body>
<form name="myfm" id="myfm" action="1.html">
<table>
<tbody>
<tr>
<td><label for="uname">用户名:</label></td>
<td><input type="text" id="uname" name="uname"/></td>
<td><div id="unameTip"></div></td>
</tr>
<tr>
<td><label for="pwd">密码:</label></td>
<td><input type="password" id="pwd" name="pwd"/></td>
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td><label for="repwd">重复密码:</label></td>
<td><input type="password" name="repwd" id="repwd"/></td>
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td><label>性别:</label></td>
<td>
<input type="radio" name="sex" value="male" id="male"/>
<label for="male">男</label>
<input type="radio" name="sex" value="female" id="female"/>
<label for="female">女</label>
</td>
</tr>
<tr>
<td><label for="area">地区:</label></td>
<td>
<select name="area" id="area">
<option value="0">- 请选择 -</option>
<option value="1">锦江区</option>
<option value="2">金牛区</option>
<option value="3">龙泉驿区</option>
<option value="4">青羊区</option>
</select>
</td>
</tr>
<tr>
<td><label for="num">身份证:</label></td>
<td><input type="text" id="num" name="num"/></td>
<td><div id="numTip"></div></td>
</tr>
<tr>
<td><label for="phone">电话号码:</label></td>
<td><input type="text" name="phone" id="phone"/></td>
<td><div id="phoneTip"></div></td>
</tr>
<tr>
<td><label for="email">邮箱:</label></td>
<td><input type="text" name="email" id="email"/></td>
<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" id="submit" value="提交"/></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<script>
$.formValidator.initConfig({ //用于配置当前formValidator插件
formID:"myfm",
debug:false,
submitOnce:true,
validatorGroup : '1', //设置验证组,默认值为1
onSuccess : function(){ //验证成功后的回调函数
}, 
onError:function(){ //验证失败后的回调函数
} 
});
$('#uname').formValidator({
ValidatorGroup : '1', //验证组为1 
onEmpty : '用户名不能为空', //提示用户名不能为空
onShow : "", 
onFocus : '用户名必须为1到12位的数字或字母',//表单元素获得焦点的时候提示应输入的格式
onCorrect : '用户名输入正确' //输入正确的提示
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{1,12}$', //验证表单输入的正则表达式
onError : '用户名格式有误,请从新输入' //输入错误的提示
})
.ajaxValidator({ //验证输入的用户名是否已经存在
dataType : 'html', //请求数据的格式
async : true, //异步方式
url : 'test.php',
success : function(data){
if (data=='false') {
return false;
}else{
return true;
}
},
onError : '该用户名已存在,请从新输入',
onWait : '正在对用户名进行合法性校验,请稍候...'
});
$('#pwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密码不能为空',
onShow : "",
onFocus : '密码必须为6位以上的字母或数字',
onCorrect : '密码输入正确'
})
.regexValidator({
regExp : '[0-9a-zA-Z]{6,}',
onError : '密码格式有误,请从新输入'
});
$('#repwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密码不能为空',
onShow : "",
onFocus : '密码必须为6位以上的字母或数字',
onCorrect : '密码输入正确'
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{6,}$',
onError : '密码格式不正确'
})
.compareValidator({ //比较两次输入内容是否符合下面给出的比较符号
desID : 'pwd', //相比较的表单元素的ID值
operateor : '=', //要比较的两个元素之间的关系
onError : '两次密码输入不一致,请从新输入' //不满足以上关系的时候的提示
});
$('#num').formValidator({
ValidatorGroup : '1',
onEmpty : '身份证不能为空',
onShow : '',
onFocus : '请输入您的身份证号',
onCorrect : '身份证格式正确'
}).regexValidator({
regExp : '^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{4}$',
//15位身份证号码的正则表达式/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/
onError : '身份证格式有误,请从新输入'
});
$('#phone').formValidator({
ValidatorGroup : '1',
onEmpty : '手机号码不能为空',
onShow : '',
onFocus : '请输入您的手机号码',
onCorrect : '手机号码格式正确',
})
.regexValidator({
regExp : '^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$',
onError : '手机号码格式有误,请从新输入'
});
$('#email').formValidator({
ValidatorGroup : '1',
onEmpty : '邮箱地址不能为空',
onShow : '',
onFocus : '请输入您的邮箱地址',
onCorrect : '邮箱格式正确'
})
.regexValidator({
regExp : '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$',
onError : '邮箱格式有误,请从新输入'
});
</script>
</body>
</html>
php部分代码:
<?php
header('Content-Type:html');
$name=array('Tom','ervin','Jhon');
$uname=$_REQUEST['uname'];
$notexit='true';
for ($i=0; $i <3 ; $i++) { 
if ($uname==$name[$i]) {
$notexit='false';
break;
}else{
}
}
echo "$notexit";
?>

以上内容是小编给大家介绍的jQuery formValidator表单验证相关知识,希望对大家有所帮助,同时感谢大家对三水点靠木网站的支持。

Javascript 相关文章推荐
js判断url是否有效的两种方法
Mar 04 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
JavaScript中的原始值和复杂值
Jan 07 #Javascript
理解JS事件循环
Jan 07 #Javascript
angularjs创建弹出框实现拖动效果
Aug 25 #Javascript
JavaScript中定义类的方式详解
Jan 07 #Javascript
javascript类型系统 Window对象学习笔记
Jan 07 #Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 #Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 #Javascript
You might like
PHP字符串处理的10个简单方法
2010/06/30 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
python实现周期方波信号频谱图
2018/07/21 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
STP的判定过程
2012/10/01 面试题
Delphi工程师笔试题
2013/09/21 面试题
优秀班干部事迹材料
2014/01/26 职场文书
大学毕业感言200字
2014/03/09 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
教师节随笔
2015/08/15 职场文书
《秋思》教学反思
2016/02/23 职场文书
golang json数组拼接的实例
2021/04/28 Golang
pandas中DataFrame检测重复值的实现
2021/05/26 Python
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers