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 相关文章推荐
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
canvas绘制的直线动画
Jan 23 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
比较node.js和Deno
Apr 27 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调用C#开发的dll类库方法
2014/07/28 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
python实现八大排序算法(2)
2017/09/14 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
python实现简单俄罗斯方块
2020/03/13 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
机电一体化毕业生自荐信
2014/06/19 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书