easyui---form表单_validatebox验证框

最新推荐文章于 2020-01-31 22:12:03 发布

weixin_34416649

最新推荐文章于 2020-01-31 22:12:03 发布

阅读量183

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/fpcbk/p/9852895.html

版权

第一种方式：混合写法  
$("#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.' //

　　　　　　 }

});

<%@ 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>

View Code

转载于:https://www.cnblogs.com/fpcbk/p/9852895.html

weixin_34416649

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui---form表单_validatebox验证框

第一种方式：混合写法 $("#password").validatebox({}) <td><input type="text" name="password" required="true" id="password"></td>第二种方式：js写法 $("#password").validatebox({required="t...
复制链接

扫一扫