yakjuly's blog

formValidator是国内一个javascript牛人写的jquery插件，专门用来验证表单。

jQuery formValidator表单校验插件，你只需要写一行代码就可以轻松实现20多种脚本控制，实现了js脚本于页面的分离。
jQuery formValidator表单校验代码生成器是针对jQuery formValidator表单校验插件ver2.4版本来写的。书写这个生成器的目的：
1、减少书写错误。主要是配置参数容易书写错误，JS是认大小写。
2、提高代码复用性。
3、让不懂JS的人更容易上手。
4、不用记忆配置参数。

这个插件非常好用，写法和ruby的named_scope一样，连着一串就能实现表单验证。

第一步，下载formValidator.

第二步，页面中加载javscript，css.

<%= javascript_include_tag "jquery", "formValidator_min", "formValidatorRegex" %>
<script type="text/javascript">
  var $j = jQuery.noConflict();
</script>
<%= javascript_include_tag :defaults%>
<%= stylesheet_link_tag "validator" %>

第三步，书写验证代码

<% form_for :rent, @rent, :url => rents_path, :html=>{:id=>"form1", :multipart => true} do |f| %>
<table class="box1" cellspacing="0" cellpadding="0">
	<tr>
		<td class="t"><%= f.label(:title) %>：</td>
		<td><%= f.text_field(:title, :class=>"text1",:maxlength=>25) %></td>
		<td><%= f.tip(:title) %></td>
	</tr>
	<tr>
		<td class="t"><%= f.label(:xiaoqu) %>：</td>
		<td><%= f.text_field(:xiaoqu, :class=>"text4",:maxlength=>30,:size=>15) %></td>
		<td><%= f.tip(:xiaoqu)%></td>
	</tr>
	<tr>
		<td class="t"><%= f.label(:price) %>：</td>
		<td><%= f.text_field(:price, :maxlength=>5, :class=>"gray text3") %> <%= t(:yuan_per_month) %> <%= f.select(:pay_type_id, PayType.list_for_select) %></td>
		<td><%= f.tip(:price) %></td>
	</tr>
	<tr>
		<td class="t"><%= t(:house_type) %>：</td>
		<td><%= f.text_field(:room, :maxlength=>1, :class=>"text3") %><%= t(:room) %><%= f.text_field(:hall, :maxlength=>1, :class=>"text3")%><%= t(:hall) %>
				<%= f.text_field(:toilet, :maxlength=>1, :class=>"text3")%><%= t(:toilet) %> <%= t(:number) %><%= f.text_field(:at_level, :maxlength=>2, :class=>"text3")%><%= t(:level) %>
				<%= t(:total) %><%= f.text_field(:total_level, :maxlength=>2, :class=>"text3") %><%= t(:level) %></td>
		<td><%= f.tip(:house_type) %></td>
	</tr>
	<tr>
		<td class="t"><%= f.label(:space) %>：</td>
		<td><%= f.text_field(:space, :maxlength=>4, :class=>"text3") %><%= t(:sm) %> <%= f.select(:object_type_id, ObjectType.list_for_select) %>
			<%= f.select(:fit_type_id, FitType.list_for_select) %><%= f.select(:toward_id, Toward.list_for_select) %></td>
		<td><%= f.tip(:space) %></td>
	</tr>
	<tr>
		<td class="t"><%= f.label(:description) %>：</td>
		<td>
			<%= f.text_area(:description, :class => "textarea2 gray", :maxlength=>2000) %>
		</td>
		<td><%= f.tip(:description) %></td>
	</tr>
	<tr>
		<td class="t"></td>
		<td colspan="2">
			<% f.fields_for :sub_images do |sub_image| %>
			<%= sub_image.file_field(:upload_data) %>
			<% end %>
		</td>
	</tr>
	<tr>
		<td class="t"><%= t(:identity) %>：</td>
		<td><%= f.check_box(:is_broker) %><%= f.label(:is_broker) %></td>
		<td></td>
	</tr>
	<tr>
		<td class="t"><%= f.label(:phone) %>：</td>
		<td><%= f.text_field(:phone, :class=>"text2") %></td>
		<td><%= f.tip(:phone) %></td>
	</tr>
	<tr>
		<td colspan="3"><%= submit_tag(t(:publish)) %></td>
	</tr>
</table>

$j(document).ready(function(){
 $j.formValidator.initConfig({formid:"form1",onerror:function(){alert("校验没有通过，具体错误请看错误提示")}});
 $j("#rent_title").formValidator({onshow:"请输入标题",onfocus:"6-25个字符,标题将被展示在详细页和列表页最醒目的位置"}).inputValidator({min:6, max:25, onerror:"您的标题非法，请确认"});
 $j("#rent_xiaoqu").formValidator({onshow:"请输入房源所在小区", onfocus: "2～30个字，小区信息将会显示在详细页"}).inputValidator({min:2,max:30, onerror: "2～30个字，小区信息将会显示在详细页" }).regexValidator({ regexp: "\\S+", onerror: "请输入房源所在小区" })
 $j("#rent_price").formValidator({onshow:"请输入租金",empty:true, onempty:"租金面议", onfocus: "租金只能为整数", defaultvalue:'面议'}).regexValidator({ regexp: "^\\S+$#^[1-9]\\d{0,4}$", onerror: "请填写租金#租金为0以外的整数" })
 $j("#rent_space").formValidator({onshow:"请输入房屋面积", onfocus:"填写整数，不能是“0”"}).regexValidator({regexp:"^[1-9]\\d{0,3}$", onerror:"面积为0以外的整数"})
 $j("#rent_room").formValidator({tipid:"rent_house_typeTip", onshow:"请输入居室数", onfocus:"填写整数，不能是“0”", oncorrect:"输入正确"}).regexValidator({regexp:"^[1-9]$", onerror:"户型必须为数字，居室不能填写0"})
 $j("#rent_hall").formValidator({tipid:"rent_house_typeTip",  onshow:"请输入大厅数", onfocus:"填写数字"}).regexValidator({regexp:"^\\d{1}$", onerror:"厅数必须是数字"})
 $j("#rent_toilet").formValidator({tipid:"rent_house_typeTip",  onshow:"请输入卫生间数", onfocus:"填写数字"}).regexValidator({regexp:"^\\d{1}$", onerror:"卫生间数必须是数字"})
 $j("#rent_at_level").formValidator({tipid:"rent_house_typeTip",  onshow:"请输入所在楼层数", onfocus:"填写整数，不能是“0”和负数"}).regexValidator({regexp:"^[1-9]\\d{0,3}}$", onerror:"楼层必须为数字，不能是“0”。总楼层不能是负数"}).compareValidator({ desid: "rent_total_level", operateor: "<=", onerror: "总楼层不能小于所在楼层", datatype: "number" })
 $j("#rent_total_level").formValidator({tipid:"rent_house_typeTip", onshow:"请输入户型", onfocus:"填写整数，不能是“0”和负数"}).regexValidator({ regexp: "^[1-9]\\d{0,3}$", onerror: "楼层必须为数字，不能是“0”。总楼层不能是负数" }).compareValidator({ desid: "rent_at_level", operateor: ">=", onerror: "总楼层不能小于所在楼层", datatype: "number" })
 $j("#rent_description").formValidator({onfocus: "10~2000字, 描述房源情况"}).inputValidator({min:10,max:2000,onerror:"房源描述是必填项"})
 $j("#rent_phone").formValidator({onshow:"请输入手机或电话", onfocus:"请正确填写电话号码，分机可以用“-”分开"}).inputValidator({onerror:"请填写电话号码"}).regexValidator({regex:"^\\d{11}$", onerror:"电话填写错误。<br/>请参照格式填写：138********"})
 defaultText("rent_description", "例如对房屋的整体描述，小区以及小区周边的介绍，附近交通信息等…");
 defaultText("rent_price", "面议");
 })
</script>
<% end %>

其中 f.tip是扩展了formbuilder的方法

module ApplicationHelper

  def tip_for(object, field, *args)
    options = args.extract_options!
    options[:id] = "#{object}_#{field}Tip"
    content_tag(:div, "", options)
  end

end

class ActionView::Helpers::FormBuilder

  def tip(field, *args)
    @template.tip_for(@object_name, field, *args)
  end

end

效果如图：

rails中的model验证非常好用，如果配合上jquery的formvalidator在javascript上再做一层验证，我相信用户体验会更好。

不知道如何使rails项目中jquery和prototype兼容的朋友，请看这里。

要想最快的开始使用formValidator就是看例子。

formValidator的用户手册，请看这里。