原生JS 表单提交验证器
一、前言
最近在开发一个新项目，需要做登陆等一系列的表单提交页面。在经过“缜密”的讨论后,我们决定 不用外部流行的框架，如bootstrap，由于我负责的模块
仅仅是其中的一部分，因此少数服从多数，无奈只能抛弃bootstrap等提供的布局，样式以及验证等一些列如此方便的组件，（他们拒绝使用的原因也令人发省）。
那么问题就来了。
二、设计理念
我们都知道，在抛开外部框架，仅仅用JS+css+html 去开发一个页面，是很复杂的，尤其是在没有美工，前台的情况下。其实bootstrap 在一定程度上 为公司节省了 美工 前台的开支...
废话少说，1天搞定了页面之后，开始为表单添加JS验证。用原生JS写验证是一件很吃力的事情，就算把各种验证方式，正则表达式，为空判断，长度判断，复杂各类字符组合判断等，集中到一个文件当中，依然可能无法排除每个页面中各种的条件语句，万一一个表单 N个input呢？
而jquery validate组件 等 是怎样实现的呢，其实现实中表示，只要会用就行了 不用了解其工作原理。就像你只要会开汽车 就足够了，不用去了解车是怎么实现的，那么当你有一天会开飞机，那么你就登上了人生的“巅峰”。
三、自定义验证器
废话不多说 直接上代码
/**
* Created by sicd 2015-5-29.
*/
$(function(){
});
var suc_img='<i class="error-img"></i>';
var err_tag='<span class="error-msg" id="error-msg" style="display: block;"></span>';
function isIP(strIP) {
if (isNull(strIP)) return false;
var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式
if(re.test(strIP))
{
if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;
}
return false;
}
/*
用途：检查输入字符串是否为空或者全部都是空格
输入：str
返回：
如果全是空返回true,否则返回false
*/
function isNull( str ){
if ( str == "" ) return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}
/*
用途：检查输入对象的值是否符合整数格式
输入：str 输入的字符串
返回：如果通过验证返回true,否则返回false
*/
function isInteger( str ){
var regu = /^[-]{0,1}[0-9]{1,}$/;
return regu.test(str);
}
/*
用途：检查输入手机号码是否正确
输入：
s：字符串
返回：
如果通过验证返回true,否则返回false
*/
function checkMobile( s ){
var regu =/^[1][3][0-9]{9}$/;
var re = new RegExp(regu);
if (re.test(s)) {
return true;
}else{
return false;
}
}
/*
用途：检查输入字符串是否符合正整数格式
输入：
s：字符串
返回：
如果通过验证返回true,否则返回false
*/
function isNumber( s ){
var regu = "^[0-9]+$";
var re = new RegExp(regu);
if (s.search(re) != -1) {
return true;
} else {
return false;
}
}
/*
用途：检查输入字符串是否是带小数的数字格式,可以是负数
输入：
s：字符串
返回：
如果通过验证返回true,否则返回false
*/
function isDecimal( str ){
if(isInteger(str)) return true;
var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;
if (re.test(str)) {
if(RegExp.$1==0&&RegExp.$2==0) return false;
return true;
} else {
return false;
}
}
/*
用途：检查输入对象的值是否符合端口号格式
输入：str 输入的字符串
返回：如果通过验证返回true,否则返回false
*/
function isPort( str ){
return (isNumber(str) && str<65536);
}
/*
用途：检查输入对象的值是否符合E-Mail格式
输入：str 输入的字符串
返回：如果通过验证返回true,否则返回false
*/
function isEmail( str ){
var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
if(myReg.test(str)) return true;
return false;
}
/*
用途：检查输入字符串是否符合金额格式
格式定义为带小数的正数，小数点后最多三位
输入：
s：字符串
返回：
如果通过验证返回true,否则返回false
*/
function isMoney( s ){
var regu = "^[0-9]+[\.][0-9]{0,3}$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
} else {
return false;
}
}
/*
用途：检查输入字符串是否只由英文字母和数字和下划线组成
输入：
s：字符串
返回：
如果通过验证返回true,否则返回false
*/
function isNumberOr_Letter( s ){//判断是否是数字或字母
var regu = "^[0-9a-zA-Z\_]+$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
}else{
return false;
}
}
/*
用途：检查输入字符串是否只由英文字母和数字组成
输入：
s：字符串
返回：
如果通过验证返回true,否则返回false
*/
function isNumberOrLetter( s ){//判断是否是数字或字母
var regu = "^[0-9a-zA-Z]+$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
}else{
return false;
}
}
/*
用途：检查输入字符串是否只由汉字、字母、数字组成
输入：
value：字符串
返回：
如果通过验证返回true,否则返回false
*/
function isChinaOrNumbOrLett( s ){//判断是否是汉字、字母、数字组成
var regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
}else{
return false;
}
}
/*
用途：判断是否是日期
输入：date：日期；fmt：日期格式
返回：如果通过验证返回true,否则返回false
*/
function isDate( date, fmt ) {
if (fmt==null) fmt="yyyyMMdd";
var yIndex = fmt.indexOf("yyyy");
if(yIndex==-1) return false;
var year = date.substring(yIndex,yIndex+4);
var mIndex = fmt.indexOf("MM");
if(mIndex==-1) return false;
var month = date.substring(mIndex,mIndex+2);
var dIndex = fmt.indexOf("dd");
if(dIndex==-1) return false;
var day = date.substring(dIndex,dIndex+2);
if(!isNumber(year)||year>"2100" || year< "1900") return false;
if(!isNumber(month)||month>"12" || month< "01") return false;
if(day>getMaxDay(year,month) || day< "01") return false;
return true;
}
function getMaxDay(year,month) {
if(month==4||month==6||month==9||month==11)
return "30";
if(month==2)
if(year%4==0&&year%100!=0 || year%400==0)
return "29";
else
return "28";
return "31";
}
/*
用途：字符1是否以字符串2结束
输入：str1：字符串；str2：被包含的字符串
返回：如果通过验证返回true,否则返回false
*/
function isLastMatch(str1,str2)
{
var index = str1.lastIndexOf(str2);
if(str1.length==index+str2.length) return true;
return false;
}
/*
用途：字符1是否以字符串2开始
输入：str1：字符串；str2：被包含的字符串
返回：如果通过验证返回true,否则返回false
*/
function isFirstMatch(str1,str2)
{
var index = str1.indexOf(str2);
if(index==0) return true;
return false;
}
/*
用途：字符1是包含字符串2
输入：str1：字符串；str2：被包含的字符串
返回：如果通过验证返回true,否则返回false
*/
function isMatch(str1,str2)
{
var index = str1.indexOf(str2);
if(index==-1) return false;
return true;
}
/*
用途：检查输入的起止日期是否正确，规则为两个日期的格式正确，
且结束如期>=起始日期
输入：
startDate：起始日期，字符串
endDate：结束如期，字符串
返回：
如果通过验证返回true,否则返回false
*/
function checkTwoDate( startDate,endDate ) {
if( !isDate(startDate) ) {
alert("起始日期不正确!");
return false;
} else if( !isDate(endDate) ) {
alert("终止日期不正确!");
return false;
} else if( startDate > endDate ) {
alert("起始日期不能大于终止日期!");
return false;
}
return true;
}
/*
用途：检查输入的Email信箱格式是否正确
输入：
strEmail：字符串
返回：
如果通过验证返回true,否则返回false
*/
function checkEmail(strEmail) {
//var emailReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;
var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if( emailReg.test(strEmail) ){
return true;
}else{
alert("您输入的Email地址格式不正确！");
return false;
}
}
/*
用途：检查输入的电话号码格式是否正确
输入：
strPhone：字符串
返回：
如果通过验证返回true,否则返回false
*/
function checkPhone( strPhone ) {
var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;
var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;
var prompt = "您输入的电话号码不正确!"
if( strPhone.length > 9 ) {
if( phoneRegWithArea.test(strPhone) ){
return true;
}else{
alert( prompt );
return false;
}
}else{
if( phoneRegNoArea.test( strPhone ) ){
return true;
}else{
alert( prompt );
return false;
}
}
}
/*
用途：检查复选框被选中的数目
输入：
checkboxID：字符串
返回：
返回该复选框中被选中的数目
*/
function checkSelect( checkboxID ) {
var check = 0;
var i=0;
if( document.all(checkboxID).length > 0 ) {
for( i=0; i<document.all(checkboxID).length; i++ ) {
if( document.all(checkboxID).item( i ).checked ) {
check += 1;
}
}
}else{
if( document.all(checkboxID).checked )
check = 1;
}
return check;
}
/*
*
* 检查是否是64的倍数
*/
function Is64Multi(num){
if(num % 64 == 0){
return true;
}else{
return false;
}
}
function getTotalBytes(varField) {
if(varField == null)
return -1;
var totalCount = 0;
for (i = 0; i< varField.value.length; i++) {
if (varField.value.charCodeAt(i) > 127)
totalCount += 2;
else
totalCount++ ;
}
return totalCount;
}
function getFirstSelectedValue( checkboxID ){
var value = null;
var i=0;
if( document.all(checkboxID).length > 0 ){
for( i=0; i<document.all(checkboxID).length; i++ ){
if( document.all(checkboxID).item( i ).checked ){
value = document.all(checkboxID).item(i).value;
break;
}
}
} else {
if( document.all(checkboxID).checked )
value = document.all(checkboxID).value;
}
return value;
}
function getFirstSelectedIndex( checkboxID ){
var value = -2;
var i=0;
if( document.all(checkboxID).length > 0 ){
for( i=0; i<document.all(checkboxID).length; i++ ) {
if( document.all(checkboxID).item( i ).checked ) {
value = i;
break;
}
}
} else {
if( document.all(checkboxID).checked )
value = -1;
}
return value;
}
function selectAll( checkboxID,status ){
if( document.all(checkboxID) == null)
return;
if( document.all(checkboxID).length > 0 ){
for( i=0; i<document.all(checkboxID).length; i++ ){
document.all(checkboxID).item( i ).checked = status;
}
} else {
document.all(checkboxID).checked = status;
}
}
function selectInverse( checkboxID ) {
if( document.all(checkboxID) == null)
return;
if( document.all(checkboxID).length > 0 ) {
for( i=0; i<document.all(checkboxID).length; i++ ) {
document.all(checkboxID).item( i ).checked = !document.all(checkboxID).item( i ).checked;
}
} else {
document.all(checkboxID).checked = !document.all(checkboxID).checked;
}
}
function checkDate( value ) {
if(value=='') 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;
}
/*
用途：检查输入的起止日期是否正确，规则为两个日期的格式正确或都为空
且结束日期>=起始日期
输入：
startDate：起始日期，字符串
endDate： 结束日期，字符串
返回：
如果通过验证返回true,否则返回false
*/
function checkPeriod( startDate,endDate ) {
if( !checkDate(startDate) ) {
alert("起始日期不正确!");
return false;
} else if( !checkDate(endDate) ) {
alert("终止日期不正确!");
return false;
} else if( startDate > endDate ) {
alert("起始日期不能大于终止日期!");
return false;
}
return true;
}
/*
用途：检查证券代码是否正确
输入：
secCode:证券代码
返回：
如果通过验证返回true,否则返回false
*/
function checkSecCode( secCode ) {
if( secCode.length !=6 ){
alert("证券代码长度应该为6位");
return false;
}
if(!isNumber( secCode ) ){
alert("证券代码只能包含数字");
return false;
}
return true;
}
/****************************************************
function:cTrim(sInputString,iType)
description:字符串去空格的函数
parameters:iType：1=去掉字符串左边的空格
2=去掉字符串左边的空格
0=去掉字符串左边和右边的空格
return value:去掉空格的字符串
****************************************************/
function cTrim(sInputString,iType) {
var sTmpStr = ' ';
var i = -1;
if (iType == 0 || iType == 1) {
while (sTmpStr == ' ') {
++i;
sTmpStr = sInputString.substr(i, 1);
}
sInputString = sInputString.substring(i);
}
if (iType == 0 || iType == 2) {
sTmpStr = ' ';
i = sInputString.length;
while (sTmpStr == ' ') {
--i;
sTmpStr = sInputString.substr(i, 1);
}
sInputString = sInputString.substring(0, i + 1);
}
return sInputString;
}
function checkLength (str, lessLen, moreLen) {
var strLen = this.length(str);
if (lessLen != "") {
if (strLen < lessLen)
return false;
}
}
/*描述对字段验证的类*/
function Field(params){
this.field_id=params.fid; //要验证的字段的ID
this.validators=params.val; //验证器对象数组
this.on_suc=params.suc; //当验证成功的时候执行的事件
this.on_error=params.err; //当验证失败的时候执行的事件
this.checked=false; //是否通过验证
}
/*扩展这个类，加入validate方法*/
Field.prototype.validate=function(){
//循环每一个验证器
for ( var item=0;item<this.validators.length;item++ ){
/*for(item in this.valid{ators)*/
//给验证器附加验证成功和验证失败的回调事件
this.set_callback(this.validators[item]);
//执行验证器上的Validate方法，验证是否符合规则
if(this.validators[item]){
if(!this.validators[item].validate(this.data())){
break; //一旦任意一个验证器失败就停止
}
}
}
};
//获取字段值的方法
Field.prototype.data=function(){
return document.getElementById(this.field_id).value;
};
//获取该字段的对象
Field.prototype.obj=function(){
return document.getElementById(this.field_id);
}
/*设置验证器回调函数的方法set_callback如下：*/
Field.prototype.set_callback=function(val){
var self=this; //换一个名字来存储this，不然函数的闭包中会覆盖这个名字
if(val){
val.on_suc=function(){ //验证成功执行的方法
self.checked=true; //将字段设置为验证成功
/*self.on_suc(val.tips); //执行验证成功的事件*/
//不执行回调
$(self.obj()).attr('class','validate-suc');
$(self.obj()).nextAll('.error-img').show();
$(self.obj()).nextAll('.error-msg').hide().text(val.tips);
};
val.on_error=function(){ //验证失败的时候执行的方法
self.checked=false; //字段设置为验证失败
/*self.on_error(val.tips);//执行验证失败的事件*/
//不执行回调
$(self.obj()).attr('class','validate-err');
$(self.obj()).nextAll('.error-img').hide();
$('.error-msg').hide();
$(self.obj()).nextAll('.error-msg').css('display','inline').text(val.tips);
}
}
};
/*验证器*/
//非空验证
function Null_val(tip){
this.tips = tip;
this.on_suc=null;
this.on_error=null;
}
Null_val.prototype.validate=function(fd){
if(isNull(fd)){
this.on_error();
return false;
}
this.on_suc();
return true;
}
//长度验证
function Len_val(min_l,max_l,tip){
this.min_v=min_l;
this.max_v=max_l;
this.tips=tip;
this.on_suc=null;
this.on_error=null;
}
Len_val.prototype.validate=function(fd){
if(fd.length<this.min_v||fd.length>this.max_v){
this.on_error();
return false;
}
this.on_suc();
return true;
}
//正整数数字验证
function PosiInteg_val(tip){
this.tips=tip;
this.on_suc=null;
this.on_error=null;
}
PosiInteg_val.prototype.validate = function(fd){
if(!isNumber(fd)){
this.on_error();
return false;
}
this.on_suc();
return true;
}
//是否是64的倍数
function Is64Multiple(tip){
this.tips=tip;
this.on_suc=null;
this.on_error=null;
}
Is64Multiple.prototype.validate = function(fd){
if(!Is64Multi(fd)){
this.on_error();
return false;
}
this.on_suc();
return true;
}
//select是否选择验证
Select_isSelected.prototype.validate=function(fd){
if(fd == -1){
this.on_error();
return false;
}
this.on_suc();
return true;
}
function Select_isSelected(tip){
this.tips=tip;
this.on_suc=null;
this.on_error=null;
}
//正则表达式验证器
function Exp_val(expresion,tip){
this.exps=expresion;
this.tips=tip;
this.on_suc=null;
this.on_error=null;
}
Exp_val.prototype.validate=function(fd){
if(!fd){
this.on_suc();
return true;
}
if(this.exps.test(fd)){
this.on_suc();
return true;
}else{
this.on_error();
return false;
}
}
//远程验证器
function Remote_val(url,tip){
this.p_url=url;
this.tips=tip;
this.on_suc=null;
this.on_error=null;
}
Remote_val.prototype.validate=function(fd){
var self=this;
$.post(this.p_url,{f:fd},
function(data){
if(data.rs){
self.on_suc();
return;
}else{
self.on_error();
}
},"json"
);
return false;
}
//自定义函数验证器
function Man_val(tip,func){
this.tips=tip;
this.val_func=func;
this.on_suc=null;
this.on_error=null;
}
Man_val.prototype.validate=function(fd){
if(this.val_func(fd)){
this.on_suc();
}else{
this.on_error();
}
}
function FieldForm(items){
this.f_item=items; //把字段验证对象数组复制给属性
for(idx=0;idx<this.f_item.length;idx++){ //循环数组
var fc=this.get_check(this.f_item[idx]); //获取封装后的回调事件
$("#"+this.f_item[idx].field_id).change(fc); //绑定到控件上
}
};
//绑定验证事件的处理器，为了避开循环对闭包的影响
FieldForm.prototype.get_check=function(v){
return function(){ //返回包装了调用validate方法的事件
v.validate();
}
}
/*绑定按钮click*/
FieldForm.prototype.set_submit=function(bid,bind){
var self=this;
$("#"+bid).click(
function(){
if(self.validate()){
bind();
}
}
);
}
/*这里提到了一个FieldForm的validate方法*/
FieldForm.prototype.validate=function(){
for(idx in this.f_item){ //循环每一个验证器
this.f_item[idx].validate(); //再检测一遍
if(!this.f_item[idx].checked){
return false; //如果错误就返回失败，阻止提交
}
}
return true; //一个都没错就返回成功执行提交
}
//绑定输入框foucs事件 检测
$(function(){
$('.theme-normal input').bind('click', function() {
if($(this).hasClass('validate-err')){
$('.error-msg').hide();
$(this).nextAll('.error-msg').css('display','inline');
}
});
});
原理就不多说了，或多或少都有注释，结构就是很简单，最上面一部分是验证方法集合，本人偷懒 直接写在一个文件里，中间部分就是验证器，关于事件触发，回调，定义等，
稍微花点时间就能够看懂。当然 本验证器 还有很多优化的地方，可以通过调整，改变成符合自己的专用验证器。
下面是调用，或者说是赋予标签 验证器：
var form;
$(function() {
//表单验证
var uf = new FieldForm([
new Field({fid : "captcha",val : [ new Null_val("验证码为必填项,请输入")]}),
new Field({fid : "username",val : [ new Null_val("用户名为必填项,请输入"),new Len_val(1,8,"用户名长度不能超过8位，请重新输入！")]}),
new Field({fid : "password",val : [ new Null_val("密码为必填项,请输入"),new Len_val(1,32,"密码长度不能超过32位，请重新输入！")]})
]);
uf.set_submit("subBtn", function(form) {
$('#subBtn').parents('form').submit();
});
});
效果
其中样式 是我自己写的，当input（包括下拉框） 值 发生变化 则进行验证（可以调整验证器，改变触发形式），提交触发验证，input获得焦点时
如果之前验证不通过，则弹出提示框。
四、总结
很简单，一下午就能看懂 并且调整自如，由于本人懒，没有展示CSS相关的代码文件，如有兴趣，可以吧这些东西提取出来或者做整合
做成组件，做成像日期控件那样的，方便移植和运用。
tip：（提示框等样式如果需要可以留言）
曾经的难题，现已迎刃而解;现在的难题，未来胸有成竹。
