Javascript自定義表單驗證規(guī)則
|
admin
2012年3月12日 13:59
本文熱度 3100
|
- 1.自定義的表單驗證屬性:datatype,scriptPrompt,nomorethan,notnull;
這四個屬性并非html元素所有,自定義的規(guī)則屬性,簡單介紹下:
datatype:要驗證的數(shù)據(jù)類型;
scriptPrompt:驗證不通過后的提示語;
nomorethan:不超過多少個字符;
notnull:是否是必填項("true" or "yes" 表示必填);
2.自定義驗證規(guī)則checkForm(),用于表單提交的onsubmit="return checkForm();"屬性中,當然也可以在js中驗證;
主函數(shù):
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.主函數(shù)checkForm()中又有新函數(shù):isNull(),checkData();
isNull()函數(shù):
function isNull(o) {
if (o.notnull) {
if ((o.notnull == "true" || o.notnull == "yes") && trim(o.value) == '') {
return false;
}
}
return true;
}
注:如果表單中,設(shè)置了notnull屬性,就會接受該驗證;
checkData()函數(shù):該函數(shù)是任何自定義的數(shù)據(jù)類型,接受該驗證:
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 + "請輸入正確的數(shù)字!");
o.select();
return false;
}
}
if (datatype == "int") {
if (isNumber(o.value) == false) {
alert(o.scriptPrompt + "請輸入正確的正整數(shù)!");
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) + ",已經(jīng)輸入了" + 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) + ",已經(jīng)輸入了"+ 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;
}
注:該函數(shù)內(nèi)容很多,每個if條件都有一次驗證,驗證規(guī)則又是單獨的js函數(shù),完全自定義:
列出一部分:
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;
}
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;
}
}
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;
}
}
}
function checkMobilePhone(strPhone) {
var pattern = /^[1]\d{10}$/;
var prompt = "您輸入的手機號碼格式不正確!"
if (!pattern.exec(strPhone)) {
alert(prompt);
return false;
}
}
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"的驗證規(guī)則):
<input name="telMobile" datatype="MobilePhone" scriptPrompt="手機" nomorethan="20" type="text"/>
5.這樣一個js文件,基本完全可以驗證整個項目中需要驗證的地方,而且規(guī)則都是自己定的,擴充性很強!
該文章在 2012/3/12 13:59:07 編輯過