自定义表单验证规则


1.自定义的表单验证属性:datatype,scriptPrompt,nomorethan,notnull;
这四个属性并非html元素所有,自定义的规则属性,简单介绍下:
datatype:要验证的数据类型;
scriptPrompt:验证不通过后的提示语;
nomorethan:不超过多少个字符;
notnull:是否是必填项("true" or "yes" 表示必填);

2.自定义验证规则checkForm(),用于表单提交的onsubmit="return checkForm();"属性中,当然也可以在js中验证;
主函数:
function checkForm() {
var ele = document.forms[0].elements;
for (i = 0; i < ele.length; i++) {
if (ele[i].type == 'text' || ele[i].type == 'file'|| ele[i].type == 'textarea' || ele[i].type == 'password') {
if (isNull(ele[i]) == false) {
alert(ele[i].scriptPrompt + '不能为空!');
ele[i].select()
return false;
}
if (checkData(ele[i]) == false) {
ele[i].select()
return false;
}
}
}
return true;
}

3.主函数checkForm()中又有新函数:isNull(),checkData();
isNull()函数:
function isNull(o) {
if (o.notnull) {
if ((o.notnull == "true" || o.notnull == "yes") && trim(o.value) == '') {
return false;
}
}
return true;
}
注:如果表单中,设置了notnull属性,就会接受该验证;

checkData()函数:该函数是任何自定义的数据类型,接受该验证:
function checkData(o) {
var datatype = o.datatype;
if (o.value.indexOf('\'') != -1) {
alert(o.scriptPrompt + "请不要输入非法字符!\" \' \"");
return false;
}
if (datatype == "number") {
if (checkNumber(o) == false) {
alert(o.scriptPrompt + "请输入正确的数字!");
o.select();
return false;
}
}
if (datatype == "int") {
if (isNumber(o.value) == false) {
alert(o.scriptPrompt + "请输入正确的正整数!");
o.select();
return false;
}
if (parseInt(o.value) < parseInt(o.min) || parseInt(o.value) > parseInt(o.max)) {
alert(o.scriptPrompt + "应该在" + o.min + "--" + o.max + "之间!");
o.select();
return false;
}
}
if (datatype == "date") {
if (!isDate(o.value)) {
alert(o.scriptPrompt + "请输入正确的日期!");
o.select();
return false;
}
}
if (datatype == "zh") {
if (!checkZH(o.value)) {
alert(o.scriptPrompt + "只允许输入汉字!");
o.select();
return false;
}else{
if (o.nomorethan != "") {
if (getByteLen(o.value) > o.nomorethan) {
alert(o.scriptPrompt + "最大长度" + (o.nomorethan) + ",已经输入了" + getByteLen(o.value) + "(中文长度为2)!");
o.select();
return false;
}
}
}
}
if (datatype == "EString") {
if (getByteLen(o.value) > o.value.length) {
alert(o.scriptPrompt + "该输入框不能有中文字符!");
o.select();
return false;
}
}
if (datatype == "String") {
if (o.nomorethan != "") {
if (getByteLen(o.value) > o.nomorethan) {
alert(o.scriptPrompt + "最大长度" + (o.nomorethan) + ",已经输入了"+ getByteLen(o.value) + "(中文长度为2)!");
o.select();
return false;
}
}
}
if (datatype == "Email") {
if (o.value != "") {
return checkEmail(o.value);
}
}
if (datatype == "Phone") {// 座机
if (o.value != "") {
return checkPhone(o.value, o.scriptPrompt);
}
}
if (datatype == "MobilePhone") {// 手机
if (o.value != "") {
return checkMobilePhone(o.value);
}
}
if (datatype == "Post") {//邮编
if (o.value != "") {
return checkPost(o);
}
}
return true;
}
注:该函数内容很多,每个if条件都有一次验证,验证规则又是单独的js函数,完全自定义:
列出一部分:
/*
* 用途:检查输入的日期是否符合 yyyyMMdd 输入: value:字符串 返回: 如果通过验证返回true,否则返回false
*/
function isDate(value) {
if (value.length == 0)
return true;
if (value.length != 8 || !isNumber(value))
return false;
var year = value.substring(0, 4);
if (year > "2100" || year < "1900")
return false;
var month = value.substring(4, 6);
if (month > "12" || month < "01")
return false;
var day = value.substring(6, 8);
if (day > getMaxDay(year, month) || day < "01")
return false;
return true;
}
/*
* 用途:检查输入的Email信箱格式是否正确 输入: strEmail:字符串 返回: 如果通过验证返回true,否则返回false
*/
function checkEmail(strEmail) {
var emailReg = /^[A-Za-z0-9]+@([A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
if (emailReg.test(strEmail)) {
return true;
} else {
alert("您输入的Email地址格式不正确!");
return false;
}
}

/*
* 用途:检查输入的电话号码格式是否正确 输入: strPhone:字符串 返回: 如果通过验证返回true,否则返回false
*/
function checkPhone(strPhone, prompt) {
var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;
var phoneRegWithArea1 = /^[0][1-9]{2,3}[0-9]{5,10}$/;
var phoneRegWithArea2 = /^[1][3][1-9]{1}[0-9]{8}$/;
var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;
var prompt = "请输入正确的" + prompt + "!"
if (strPhone.length > 9) {
if (phoneRegWithArea.test(strPhone) || phoneRegWithArea1.test(strPhone)
|| phoneRegWithArea2.test(strPhone)) {
return true;
} else {
alert(prompt);
return false;
}
} else {
if (phoneRegNoArea.test(strPhone)) {
return true;
} else {
alert(prompt);
return false;
}
}
}
/**
* 验证手机格式
* @param {} strPhone
* @return {Boolean}
*/
function checkMobilePhone(strPhone) {
var pattern = /^[1]\d{10}$/;
var prompt = "您输入的手机号码格式不正确!"
if (!pattern.exec(strPhone)) {
alert(prompt);
return false;
}
}
/**
* 验证只能输入中文
* @param {} strName
* @return {Boolean}
*/
function checkZH(strName) {
var pattern = /^[\u4e00-\u9fa5]*$/;
if (!pattern.exec(strName)) {
return false;
}
return true;
}

4.定义完成之后,每个需要验证的输入只要加上上面属性,表单提交的时候,就会先验证:
如:姓名(必须是中文,且最多10个字符即五个汉字):
<input name="name" type="text" scriptPrompt="姓名" notnull="true" datatype="zh" nomorethan="10" />

手机(必须通过"MobilePhone"的验证规则):
<input name="telMobile" datatype="MobilePhone" scriptPrompt="手机" nomorethan="20" type="text"/>

5.这样一个js文件,基本完全可以验证整个项目中需要验证的地方,而且规则都是自己定的,扩充性很强!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值