JS验证表单值

在搭建web程序中，各种表单验证颇多，网上流传的各种框架也有很多，本文只是将自己从用过的一种方式记录。

jsp页面代码

<form id="register-form" action="ipr/addIprApply" method="post">			
		<div class="control-group">
				<label class="control-label">现有员工人数：</label>
				<div class="controls">
					<!-- 1、10以下,2、10-50,3、50-100,4、100-500,5、500-10000,6、10000以上 -->
                    <select name="staffNumber" class="staffNumber">
                        <option value="">请选择...</option>
                        <option value="1">10以下</option>
                        <option value="2">10-50</option>
                        <option value="3">50-100</option>
                        <option value="4">100-500</option>
                        <option value="5">500-10000</option> 
                        <option value="6">10000以上</option>                                  
                    </select>
				</div>				
			</div>	
			<div class="control-group">
				<label class="control-label">其中大专：</label>
				<div class="controls">
					<!-- 1、10%以下,2、10%~20%,3、20%~30%,4、30%~40%,5、40%~50%,6、60%~70%,7、70%~80%,8、80%~90%,9、90%~100% -->
                    <select name="juniorCollegePer" class="juniorCollegePer">
                        <option value="">请选择...</option>
                        <option value="1">10%以下</option>
                        <option value="2">10%~20%</option>
                        <option value="3">20%~30%</option>
                        <option value="4">30%~40%</option>
                        <option value="5">40%~50%</option> 
                        <option value="6">60%~70%</option>
                        <option value="7">70%~80%</option>
                        <option value="8">80%~90%</option> 
                        <option value="9">90%~100%</option>                                  
                    </select>					
				</div>				
			</div>
			<div class="control-group">
				<label class="control-label">通讯地址：</label>
				<div class="controls">
					<input name="address" class="xxlarge valid" type="text" data-status="0" isNull="0" regex="^\S{0,255}$" errorMsg="最大250字符"/>
				</div>				
			</div>
			<div class="control-group">
				<label class="control-label"><em class="st">*</em>联系人：</label>
				<div class="controls">
					<input name="linkman" class="xxlarge valid" type="text" data-status="0"  isNull="1" regex="^\S{2,10}$" errorMsg="联系人须在2~10个字符之间"/>
				</div>				
			</div>
			<div class="control-group">
				<label class="control-label"><em class="st">*</em>联系人电话：</label>
				<div class="controls">
					<input name="telephone" class="xxlarge valid" type="text" data-status="0" isNull="1" regex="^1\d{10}$|^\d{2,4}-\d{7,8}$" errorMsg="手机或固话格式不正确"/>
				</div>				
			</div>
			<div class="control-group">
				<label class="control-label"><em class="st">*</em>联系人邮箱：</label>
				<div class="controls">
					<input name="email" class="xxlarge valid" type="text" data-status="0" isNull="1" regex="^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$" errorMsg="邮箱格式不正确"/>
				</div>				
			</div>
			<div class="control-group">
				<label class="control-label">邮编：</label>
				<div class="controls">
					<input name="zipcode" class="xxlarge valid" type="text" data-status="0" isNull="0" regex="^\d{6,6}$" errorMsg="邮编须为6位数字"/>
				</div>				
			</div>
			<div class="control-group">
				<label class="control-label" for="checkcode"></label>
				<div class="controls">
					<button class="register-btn" type="submit" data-loading-text="处理中...">申请</button>
					<button class="register-btn" type="reset">重置</button>
				</div>
			</div>
		</form>
<script type="text/javascript" src="resources/js/main/ipr_apply.js"></script>

JS代码

$(function(){
	var validFn = function(){
		var ele = $(this);
		var isNull = $(this).attr('isNull');
		var regexStr = $(this).attr('regex');
		var errorMsg = $(this).attr('errorMsg');
		if(ele.siblings('label').length==0){
			ele.parent().append('<label class="info"></label>');
		}
		var info = ele.siblings('label');
		var val = ele.val();
		var flag = true;
		
		// 非空判断
		if (isNull == '1') {
			if (val == null || val == '') {
				info.removeClass('right').addClass('error').html('此项为必填项');
				flag = false;
			} else {
				info.removeClass('error').addClass('right').html('');
			}
		}
		
		// 匹配正则
		if (regexStr != null && regexStr != '' && flag && val != '') {
			var regex = new RegExp(regexStr);
			if (regex.test(val)) {
				info.removeClass('error').addClass('right').html('');
			} else {
				info.removeClass('right').addClass('error').html(errorMsg);
			}
		}
	};
	
	$('.valid').blur(validFn);
	
	$('form').submit(function(){
		$('.valid').each(validFn);
		if ($('.error').length > 0) {
			return false;
		}
		return true;
	});
})