easyui---form表单_validatebox验证框
第一种方式:混合写法
$("#password").validatebox({
}) <td><input type="text" name="password" required="true" id="password"></td>
第二种方式:js写法 $("#password").validatebox({
required="true" 注意没有分号;
}) <td><input type="text" name="password" id="password"></td>
第三种方式:html写法 <td><input type="text" name="username" id="username" required="true" class="easyui-validatebox" validType="namerules" invalidMessage="用户名无效"></td>
属性:
required="true":定义是否字段应被输入,默认false,missingMessage可以改变内容
validType 是验证规则:
验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则:
- email:匹配 email 正则表达式规则
- url:匹配 URL 正则表达式规则
- length[0,100]:允许从 x 到 y 个字符
- remote['http://.../action.do','paramName']:发送 ajax 请求来验证值,成功时返回 'true' 。
自定义验证规则,重写 $.fn.validatebox.defaults.rules :
namerules是自定义的名字,用在validType里面
$(function(){
$.extend($.fn.validatebox.defaults.rules, { namerules: { validator: function(value){ var str= /^[a-zA-Z0-9_-]{4,16}$/; return value.match(str); //return true规则生效 }, message: '4到16位(字母,数字,下划线,减号)' //message就是不满足验证规则下面框的内容 ,如果required=true,那么一开始就有验证框必填,missingMessage可以改变内容,属性invalidMessage会覆盖验证规则中message
下面就是覆盖了,所以是用户名无效,不然是 ’4到16位(字母,数字,下划线,减号)’
invalidMessage作用:当重用验证规则时,提示信息会不一样,这时可以invalidMessage
<td><input type="text" name="username" id="username" required="true" class="easyui-validatebox" validType="namerules" invalidMessage="用户名无效"></td>
},
//多个验证规则,直接在后面添加
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.' //
}
});
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP '003.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css" /> <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function() { $.extend($.fn.validatebox.defaults.rules, { namerules : { validator : function(value) { var str = /^[a-zA-Z0-9_-]{4,16}$/; return value.match(str); }, message : '4到16位(字母,数字,下划线,减号)' }, minLength : { validator : function(value, param) { return value.length >= param[0] && value.length<=param[1]; }, message : '大于5小于8位' } }); }) </script> </head> <body> <div class="easyui-panel" title="新增用户" style="width: 400px; height: 400px"> <form id="userform"> <table> <tr> <td>用户名</td> <td><input type="text" name="username" id="username" required="true" class="easyui-validatebox" validType="namerules" invalidMessage="用户名无效" missingMessage="用户名不能为空" ></td> </tr> <tr> <td>密码</td> <td><input type="text" name="password" required="true" id="password" class="easyui-validatebox" validType="minLength[5,8]" missingMessage="密码不能为空" ></td> </tr> <tr> <td>性别</td> <td>男:<input type="radio" name="sex" value="1"> 女:<input type="radio" name="sex" value="0"></td> </tr> <tr> <td>年龄</td> <td><input type="text" name="age"></td> </tr> <tr> <td>生日</td> <td><input type="text" name="birthday"></td> </tr> <tr> <td>城市</td> <td><input type="text" name="city"></td> </tr> <tr> <td>薪水</td> <td><input type="text" name="salary"></td> </tr> <tr> <td>起始时间</td> <td><input type="text" name="starttime"></td> </tr> <tr> <td>结束时间</td> <td><input type="text" name="endtime"></td> </tr> </table> <tr colspan="2" align="center"> <td colspan="2"><a class="easyui-linkbutton">点击</a></td> </tr> </form> </div> </body> </html>
海纳百川 ,有容乃大