给大家推荐两款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也是还没有完全会使用。有时间再补充吧，或者到官方网站看示例。