给大家推荐两款js验证插件

首先说说validation.js,这是一款比较常用的表单验证插件了，因为是magento自身加进去的插件，也是比较熟悉。

validation.js是基于prototype表单前端验证工具，简单易用。下面说说怎么用这个插件。
首先你需要引入js库 prototype.js、validation.js、effects.js
引入之后呢，就需要开始写你的代码了。

<form action="" method="post" id="onestep_form">
<input name="username" type="text" value="" id="username">
<input type="submit" value="submit">
</form>
<script type="text/javascript">
var form = new Validation('onestep_form',{immediate :true,onSubmit :true,stopOnFirst :true});
#以下是手动判断表单是否通过验证
if(!form.validator.validate())	{
	#code
}else{
	#code
}
#手动判断某个文本输入框
var data=$("username").value;
if(Validation.get("required").test(data)){
	#code
}else{
	#code
}
</script>

immediate form元素 焦点失去的时候是否验证
onSubmit  监听表单提交事件
stopOnFirst 检测到错误是否停止检测
focusOnError 是否聚焦出错元素
useTitles  鼠标停留在元素上的时候是否显示提示信息
onFormValidate 执行完毕后调用一个函数

元素验证的时候，需要在元素上面加class，如：
required   必填的
min-length-4 最小4个字符
max-length-8 最长不超过8个字符
min-value-4  必须比4大
max-value-8  不能大于8
validate-alphanum 数字和字母
validate-equals-XX  验证是否和上面的相等，如示例
<input type="password" name="password" class="required min-length-6 validate-alphanum">
<input type="password" name="password" class="required validate-equals-password">
下面继续
validate-number 数字
validate-digits 只能包含[0-9]任意个数字
validate-alpha  只能是字母[a-zA-Z]
validate-email  只能是有效的email
validate-url    只能是有效的url地址
validate-one-required 至少有一个被选中
validate-integer 只能是整数,可以有正负号
validate-ip 有效的IP地址
less-than-InputId  必须小于id是InputId的值
great-than-InputId 必须大于id是InputId的值
validate-date-dateFormat 必须是dateFormat格式的日期
validate-file-type1-type2-typeX  验证文件输入域选择的文件类型只能为声明的type1–typeX中的一种
float-range-minValue-maxValue  必须是在minValue和maxValue中的一个浮点数
length-range-minLength-maxLength  长度在minLength和maxLength间的一个字符串
validate-pattern-RegExp  通过正则表达式验证输入值是否正确
validate-ajax-url    通过ajax验证当前输入值是否正确
validate-chinese   只能是中文
validate-phone     电话号码
validate-mobile-phone  验证手机号码
validate-id-number     验证身份证号码
validate-zip           验证邮政编码

jQuery Validation Plugin

这是一款基于jQuery的库的表单验证插件了。官方网站是http://jqueryvalidation.org/。
同样使用的时候必须要引入库和插件。

<form class="cmxform" id="commentForm" method="get" action="">
	<fieldset>
		<legend>Please provide your name, email address (won't be published) and a comment</legend>
	<p>
		<label for="cname">Name (required, at least 2 characters)</label>
		<input id="cname" name="name" minlength="2" type="text" required/>
	</p>
	<p>
		<label for="cemail">E-Mail (required)</label>
		<input id="cemail" type="email" name="email" required/>
	</p>
	<p>
		<label for="curl">URL (optional)</label>
		<input id="curl" type="url" name="url"/>
	</p>
	<p>
		<label for="ccomment">Your comment (required)</label>
		<textarea id="ccomment" name="comment" required></textarea>
	</p>
	<p>
		<input class="submit" type="submit" value="Submit"/>
	</p>
	</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

这个插件我是最近才使用的，LZ也是还没有完全会使用。有时间再补充吧，或者到官方网站看示例。