1 自定义validatebox验证,验证用户名,密码。
2 使用方法
使用方法 < form name ="_validate" > < label > 用户名: </ label >< input class ="easyui-validatebox" missingMessage ="请输入用户名." validType ="name" required ="true" />< br /> < label > 密 码: </ label >< input type ="password" class ="easyui-validatebox" missingMessage ="请输入密码." validType ="pwd[6,8]" required ="true" />< br /> </ form > < button onclick ="go()" > 提交 </ button >
3 javascript 定义验证规则
自定义规则,重载$.fn.validatebox.defaults.
name:验证用户名是否存在。
pwd:验证密码,长度在6-8位之间。
注意:为了防止表单提交时无效,当用户点击提交按钮的形式,我们应该防止的形式提交的表格无效。加上$('_validate').form('validate')进行验证。
< script type ="text/javascript" > $(document).ready( function (){ // 自定义validatebox的验证方法 $.extend($.fn.validatebox.defaults.rules, { name: { validator: function (value){ var flag; $.ajax({ type: ' POST ' , url: ' <c:url value="/ValidateBox/ValidName.do"/> ' , data: ' name= ' + value, async: false , success: function (data) { if (data == ' success ' ) { flag = true ; } else { flag = false ; } } }); return flag; }, message: ' 您输入的用户名已存在,请更换。 ' }, pwd: { validator: function (value,param){ return value.length >= param[ 0 ] && value.length <= param[ 1 ]; }, message: ' 密码长度在{0}-{1}之间。 ' } }); }); function go() { if ($( ' _validate ' ).form( ' validate ' )) { alert( 11 ); } } </ script >
4 后台用户名验证代码
package cn.zyc.validatebox; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller(value = " validateBoxController " ) @RequestMapping( " /ValidateBox " ) public class ValidateBoxController { /** * 验证用户名是否存在 */ @RequestMapping(value = " /ValidName.do " ) public void validName(String name, HttpServletResponse response) throws Exception { List < String > names = new ArrayList < String > (); names.add( " wade " ); names.add( " james " ); names.add( " kobe " ); try { if (names.contains(name)) { writer(response, " failure " ); } else { writer(response, " success " ); } } catch (Exception e) { writer(response, " error " ); } } private static void writer(HttpServletResponse response,String str){ try { // 设置页面不缓存 response.setHeader( " Pragma " , " No-cache " ); response.setHeader( " Cache-Control " , " no-cache " ); response.setCharacterEncoding( " UTF-8 " ); response.setContentType( " text/html " ); PrintWriter out = null ; out = response.getWriter(); out.print(str); out.flush(); out.close(); } catch (IOException e) { e.printStackTrace(); } } }
5 validatebox属性及方法
属性
名称 | 类型 | 描述 | 默认值 |
required(必填) | boolean(布尔型) | 定义表单域必须填写。 | false |
validType(验证类型) | string(字符串) | 定义表单域的验证类型,比如:email, url等。 | null |
missingMessage(未填提示) | string(字符串) | 当表单域未填写时出现的提示信息。 | This field is required. |
invalidMessage(无效提示) | string(字符串) | 当表单域的内容被验证为无效时出现的提示。 | null |
方法
名称 | 参数 | 描述 |
destroy | none | 移除并注销组件。 |
validate | none | 验证表单域的内容是否有效。 |
isValid | none | 调用validate方法并且返回验证结果,true或者false。 |