自己分装的前端表单验证框架,请各位批评指正,欢迎各位优化代码~~
jsValidate.js文件如下:
/**
* jsValidate.js is used to validate the Input on Form
* @Author Alvin Xing
*/
/**
* formIsNull方法:判断相应的input表单是否为空
* 为空则返回false,表单不提交,并将errDiv的值变为errStr,例如将Span的值变为"邮箱不能为空!".不为空则返回true.
* @param goalDiv 要验证的input表单的name值.
* @param errDiv 如果验证通不过,则需要改变的div的Id.
* @param errStr 在errDiv内显示的文字. 如:"邮箱不能为空"
* @returns {Boolean}. true:验证通过; false:验证未通过.
*/
function formIsNull(goalDiv, errDiv, errStr)
{
document.getElementById(errDiv).innerHTML = "";
var temp = document.getElementsByName(goalDiv)[0].value.trim();
if (temp != "") {
return true;
} else {
document.getElementById(errDiv).innerHTML = errStr;
return false;
}
}
/**
* rightRuly方法:利用正则表达式,判断输入input的内容是否合法.
* @param Ruly :正则表达式 的字符串形式
* @param goalDiv :Input输入框的name值
* @param errDiv :验证不合法时,需要显示错误信息的div的Id值
* @param errStr : 验证不合法是显示的内容
* @returns {Boolean}. true:验证通过; false:验证未通过.
*/
function rightRuly(Ruly, goalDiv, errDiv, errStr){
// var reg = new RegExp(Ruly);
var reg = eval(Ruly);
var temp = document.getElementsByName(goalDiv)[0].value.trim();
if(reg.test(temp)){
return true;
} else {
document.getElementById(errDiv).innerHTML = errStr;
return false;
}
}
/**
* 判断两个输入框是否相同,常用语判断密码和确认密码是否相同
* @param goal01 input目标1的name值
* @param goal02 input目标2的Id值
* @param errDiv 验证错误时,显示错误消息的元素标签
* @param errStr 验证错误时的错误信息
* @returns {Boolean} 相同时返回true,不同是返回false且在Id为errDiv的标签内显示错误消息errStr
* Tips:注意 goal01为name值,goal02为Id值. 这样做的原因:表单提交时不提交Id,所以可以减少流量。
*/
function isEqual(goal01, goal02, errDiv, errStr){
var g1 = document.getElementsByName(goal01)[0].value.trim();
var g2 = document.getElementById(goal02).value.trim();
if(g1==g2){
return true;
} else {
document.getElementById(errDiv).innerHTML = errStr;
return false;
}
}
在某个前端验证中的应用如下:
function checkForm(){
//1.判断相应的input表单是否为空
var Uname = formIsNull("Uname", "Uname_bak", "用户名不能为空");
var Pwd = formIsNull('Pwd', 'Pwd_bak', "密码不能为空");
var Email = formIsNull('Email', 'Email_bak', "邮箱不能为空");
var Phone = formIsNull('Phone', 'Phone_bak', "Phone不能为空");
if(Uname&&Pwd&&Email){
//2.在第一步的基础上,判断相应的表单是否符合规则
var emailValidate = rightRuly("/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/", "Email", "Email_bak", "邮箱格式不正确");
var phoneValidate = rightRuly("/^1([0-9]{10})$/", "Phone", "Phone_bak", "不符合手机号码格式");
var pwdEqual = isEqual('Pwd', 'Pwd2', 'Pwd_bak', '两次输入密码不一致');
if(emailValidate&&phoneValidate&&pwdEqual){
return true;
} else {
return false;
}
} else {
return false;
}
}