zoukankan      html  css  js  c++  java
  • 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.'  //

           }    


    });
    <%@ 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=" 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
  • 相关阅读:
    React Native入门教程2 -- 基本组件使用及样式
    React Native入门教程 1 -- 开发环境搭建
    [轻松一下] 大热天的宿舍太热了,来网吧敲代码
    读外部存储的权限READ_EXTERNAL_STORAGE
    【翻译】Ext JS 6.2 早期访问版本发布
    等火车
    HTTP 简介
    建造模式Builder
    DP解LCS问题模板及其优化(模板)
    poj1015 正解--二维DP(完全背包)
  • 原文地址:https://www.cnblogs.com/fpcbk/p/9852895.html
Copyright © 2011-2022 走看看