189 8069 5689
做项目时前台表单验证用了jquery.validation插件。
成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的下城网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
发现在做正则表达式验证时没有参数设置可以使用，需要一个个添加方法，比较麻烦。
就做了一个简单的分装，也总结了一些正则表达式。
/**
* @anthor ycf
* @date 1017/11/3
*
* 本js是对jquery.validator的自定义方法的封装
* 只能用于正则表达验证
* 页面必须调用jquery.validator.js
* 共两个方法
* regular 只添加一个正则自定义函数
* regulararr 批量导入，传入对象即可。
* 具体信息请看页面展示及函数参数说明
* 以下是一些常用的正则表达式。
*/
//用户名验证
var usernameExp = /^[a-zA-Z0-9_-]{4,16}$/;
//姓名验证
var nameExp = /^[\u4E00-\u9FA5A-Za-z]+$/;
//密码验证
var pwdExp = /^[0-9a-zA-Z_#!@$%^*]{6,16}$/;
//年龄验证
var ageExp = /^(?:0|[1-9][0-9]?|120)$/;
//邮箱验证
var emailExp = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
//固定电话验证
var telExp = /^0\d{2,3}-\d{7,8}(-\d{1,6})?$/;
//手机号码验证
var phoneExp = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
//英文名验证
var enameExp = /^[a-zA-Z]+$/;
//邮政编码验证
var postalcodeExp = /^[0-9][0-9]{5}$/;
//QQ验证
var qqExp = /^\d{5,10}$/;
//非法字符验证
var ffzfExp = /[@#\$%\^\*]+/g;
//IP验证
var ipExp = /((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/;
//非负整数验证
var ffzsExp = /^(0|[1-9]\d*)$/;
//正负小数验证
var zfxsExp = /^[+-]?\d*\.\d{1,3}$/;
//正负整数和小数验证
var zfzshxsExp = /^(-)?\d+(\.\d+)?$/;
//身份证号验证
var idcardExp = /^[1-9][0-9]{5}(19[0-9]{2}|200[0-9]|201[0-9]|202[0-9]|203[0-9])(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9xX]$/i;
//限制输入
var limitExp = /^((?!test).)*$/; //不能输入包含test的字符串
/**
* 自定义正则匹配方法
* @param funName 自定义方法名
* @param Exp 正则表达式
* @anthor ycf
*/
function regular(funName,Exp){
jQuery.validator.addMethod(funName, function(value, element) {
return this.optional(element) || Exp.test(value);
}, "不通过");
}
/**
* 批量添加自定义正则匹配方法
* @param objExp 对象
* 例如{ "postalcodeCheck":postalcodeExp}
*
* @anthor ycf
*/
function regularArr(objExp){
$.each(objExp, function(i) {
jQuery.validator.addMethod(i, function(value, element) {
return this.optional(element) || objExp[i].test(value);
}, "不通过");
});
}
这样在前台js里只需要申明一个对象，并引入这个js文件就行了。希望能帮到大家。
由数字、26个英文字母或者下划线组成的字符串可用jquery正则表达式：
/^\w+$/，验证代码为：
var reg = /^\w+$/;
if(reg.test($("input:text").val()))
// 验证通过
else
// 验证失败
下面给出实例演示：
创建Html元素
div class="box"
span请输入用户名，限定字母、数字或下划线的组合：/spanbr
div class="content"
input type="text"/
/div
input type="button" value="验证"
/div
设置css样式
div.box{width:300px;padding:10px 20px;margin:20px;border:4px dashed #ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{width:250px;height:50px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}
input[type='text']{width:250px;height:40px;padding:0 5px;border:1px solid #6699cc;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
编写jquery代码
$(function(){
// 设置属性值
$("input:button").click(function() {
var reg = /^\w+$/;
// 如果验证失败给出警告
if(!reg.test($("input:text").val()))
alert("用户名限定为字母、数字或下划线的组合");
});
})
观察效果
1、验证汉字不能输入，输入后将汉字都替换掉
//中文的正则表达式/[\u4E00-\u9FA5]/g 将输入的中文全部替换掉
input type="text" id="text" onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\u4E00-\u9FA5]/g,''))"
2、只能输入英文字母，其他不能输入，将除了英文字母的字符都替换掉
//非英文字母的正则表达式/[^A-Za-z]/g
input onkeyup="value=value.replace(/[^A-Za-z]/g,'')"
var str=$('#id').val();
var re =/[`~!@#$%^*_+{}\/'[\]]/im;
if (re.test(str))
{
alert(存在特殊字符);
}
// 验证身份证
function isCardNo(card) {
var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
return pattern.test(card);
}
// 方法一，正则判断
var ary = new Array("111","222","33","112","222");
alert(mm(ary))
// 验证重复元素，有重复返回true；否则返回false
function mm(a)
{
return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test("\x0f"+a.join("\x0f\x0f") +"\x0f");
}
// 方法二，通过数组排序，比较临近元素，可指出重复的元素
var ary = newArray("111","22","33","111","22");
var nary = ary.sort();
for(var i = 0; i nary.length - 1; i++)
{
if (nary[i] == nary[i+1])
{
alert("重复内容：" + nary[i]);
}
}
// 方法三，通过字符串查找
var ary = newArray("111","22","33","111","22");
var s = ary.join(",") +",";
for(var i = 0; i ary.length; i++)
{
if(s.replace(ary[i] + ",", "").indexOf(ary[i] +",") -1)
{
alert("重复内容：" + ary[i]);
}
}
// 方法四，通过哈希
var ary = newArray("111","22","33","111","22");
alert(isRepeat(ary));
// 验证重复元素，有重复返回true；否则返回false
function isRepeat(arr) {
var hash = {};
for(var i in arr) {
if(hash[arr[i]])
{
return true;
}
// 不存在该元素，则赋值为true，可以赋任意值，相应的修改if判断条件即可
hash[arr[i]] = true;
}
return false;
}