miniui表单验证规则总结

最新推荐文章于 2024-10-17 15:28:05 发布
最新推荐文章于 2024-10-17 15:28:05 发布
阅读量1.1w 收藏 6
点赞数
分类专栏： jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linli1991/article/details/81335524
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表单验证规则总结</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    
    <style type="text/css">
    .td1
    {
        text-align:right;
    }
    .td2
    {
        padding-left:15px;
        font-size:13px;
        font-family:Tahoma;
    }
    </style>
</head>
<body>
    <h1>表单验证规则总结</h1>      
        
<div id="form1" >
    <table>
        <tr>
            <td class="td1">不允许为空：</td>
            <td>
                <input class="mini-textbox" required="true" />
            </td>             
            <td class="td2">required="true"</td>
        </tr>
        <tr>
            <td class="td1">必须是邮箱地址：</td>
            <td>
                <input class="mini-textbox" vtype="email" required="true"/>
            </td>                 
            <td class="td2">vtype="email"</td>    
        </tr>
        <tr>
            <td class="td1">必须是URL：</td>
            <td>
                <input class="mini-textbox" vtype="url" required="true"/>
            </td>                 
            <td class="td2">vtype="url"</td>    
        </tr>
        <tr>
            <td class="td1">必须是整数(int)：</td>
            <td>
                <input class="mini-textbox" vtype="int" required="true"/>
            </td>                 
            <td class="td2">vtype="int"</td>    
        </tr>  
        <tr>
            <td class="td1">必须是数字(float)：</td>
            <td>
                <input class="mini-textbox" vtype="float" required="true"/>
            </td>               
            <td class="td2">vtype="float"</td>      
        </tr>  
        <tr>
            <td class="td1">字符串长度（<= 6）：</td>
            <td>
                <input class="mini-textbox" vtype="maxLength:6" required="true"/>
            </td>             
            <td class="td2">vtype="maxLength:6"</td>        
        </tr>  
        <tr>
            <td class="td1">字符串长度（>= 2）：</td>
            <td>
                <input  class="mini-textbox" vtype="minLength:2" required="true"/>
            </td>               
            <td class="td2">vtype="minLength:2"</td>      
        </tr>          
        <tr>
            <td class="td1">字符串长度（2-6）：</td>
            <td>
                <input class="mini-textbox" vtype="rangeLength:2,6" required="true"/>
            </td>               
            <td class="td2">vtype="rangeLength:2,6"</td>      
        </tr>  
        <tr>
            <td class="td1">字符数个数（2-6）：</td>
            <td>
                <input class="mini-textbox" vtype="rangeChar:2,6" required="true"/>
            </td>               
            <td class="td2">vtype="rangeChar:2,6"</td>      
        </tr> 
        <tr>
            <td class="td1">数字范围（0-100）：</td>
            <td>
                <input class="mini-textbox" vtype="range:0,100" required="true"/>
            </td>          
            <td class="td2">vtype="range:0,100"</td>           
        </tr>  
        <tr>
            <td class="td1">必须是日期格式（如yyyy-MM-dd）：</td>
            <td>
                <input class="mini-textbox" vtype="date:yyyy-MM-dd" required="true"/>
            </td>            
            <td class="td2">vtype="date:yyyy-MM-dd"</td>         
        </tr> 
        <tr>
            <td class="td1">必须是日期格式（如MM/dd/yyyy）：</td>
            <td>
                <input class="mini-textbox" vtype="date:MM/dd/yyyy" required="true"/>
            </td>        
            <td class="td2">vtype="date:MM/dd/yyyy"</td>             
        </tr>   
        <tr>
            <td class="td1" style="color:Red;">邮箱格式，5~20个字符（组合）：</td>
            <td>
                <input class="mini-textbox" vtype="email;rangeLength:5,20;" required="true"/>
            </td>        
            <td class="td2">vtype="email;rangeLength:5,20;"</td>             
        </tr>   
        <tr>
            <td class="td1" style="color:Red;">必须输入英文（自定义）：</td>
            <td>
                <input class="mini-textbox" onvalidation="onEnglishValidation" />
            </td>        
            <td class="td2">onvalidation="onEnglishValidation"</td>             
        </tr>   
        <tr>
            <td class="td1" style="color:blue;">必须输入英文（自定义vtype）：</td>
            <td>
                <input class="mini-textbox" vtype="english"/>
            </td>        
            <td class="td2">vtype="english"</td>             
        </tr>   
        <tr>
            <td class="td1" style="color:Red;">必须输入英文+数字（自定义）：</td>
            <td>
                <input class="mini-textbox" onvalidation="onEnglishAndNumberValidation" />
            </td>        
            <td class="td2">onvalidation="onEnglishAndNumberValidation"</td>             
        </tr>  
        <tr>
            <td class="td1" style="color:Red;">必须输入中文（自定义）：</td>
            <td>
                <input class="mini-textbox" onvalidation="onChineseValidation" />
            </td>        
            <td class="td2">onvalidation="onChineseValidation"</td>
        </tr>   
        <tr>
            <td class="td1" style="color:Red;">身份证验证15~18位（自定义）：</td>
            <td>
                <input class="mini-textbox" onvalidation="onIDCardsValidation" />
            </td>        
            <td class="td2">onvalidation="onIDCardsValidation"</td>
        </tr>   
        <tr>
            <td></td>
            <td>
                <input value="Login" type="button" onclick="submitForm()" />
            </td>
        </tr>
    </table>
</div>
    
    <script type="text/javascript">
        mini.parse();

        function submitForm() {
            var form = new mini.Form("#form1");

            form.validate();
            if (form.isValid() == false) return;

            //提交数据
            var data = form.getData();      
            var json = mini.encode(data);  
            $.ajax({
                url: "../data/FormService.aspx?method=SaveData",
                type: "post",
                data: { submitData: json },
                success: function (text) {
                    alert("提交成功，返回结果:" + text);
                }
            });
        }
        
        function onEnglishValidation(e) {
            if (e.isValid) {
                if (isEnglish(e.value) == false) {
                    e.errorText = "必须输入英文";
                    e.isValid = false;
                }
            }
        }
        function onEnglishAndNumberValidation(e) {
            if (e.isValid) {
                if (isEnglishAndNumber(e.value) == false) {
                    e.errorText = "必须输入英文+数字";
                    e.isValid = false;
                }
            }
        }
        function onChineseValidation(e) {
            if (e.isValid) {
                if (isChinese(e.value) == false) {
                    e.errorText = "必须输入中文";
                    e.isValid = false;
                }
            }
        }
        function onIDCardsValidation(e) {
            if (e.isValid) {
                var pattern = /\d*/;
                if (e.value.length < 15 || e.value.length > 18 || pattern.test(e.value) == false) {
                    e.errorText = "必须输入15~18位数字";
                    e.isValid = false;
                }
            }
        }

        
        /* 是否英文 */
        function isEnglish(v) {
            var re = new RegExp("^[a-zA-Z\_]+$");
            if (re.test(v)) return true;
            return false;
        }

        /* 是否英文+数字 */
        function isEnglishAndNumber(v) {
            
            var re = new RegExp("^[0-9a-zA-Z\_]+$");
            if (re.test(v)) return true;
            return false;
        }

        /* 是否汉字 */
        function isChinese(v) {
            var re = new RegExp("^[\u4e00-\u9fa5]+$");
            if (re.test(v)) return true;
            return false;
        }

        /*自定义vtype*/
        mini.VTypes["englishErrorText"] = "请输入英文";
        mini.VTypes["english"] = function (v) {
            var re = new RegExp("^[a-zA-Z\_]+$");
            if (re.test(v)) return true;
            return false;
        }

    </script>

    <div class="description">
        <h3>Description</h3>
        <p>
            
        </p>        
    </div>
</body>
</html>

 

linli1991
关注
专栏目录
miniui自定义校验格式
qq_38735996的博客
04-26 1898
示例如下： 对密码校验： mini.VTypes["equalpwdErrorText"] = "新密码两次输入不一致"; mini.VTypes["equalpwd"] = function (v) { var data = form.getData(); if (data.newpsw == data.confirmpsw...
MiniUI快速入门教程（四）表单开发
Ling_PF的博客
07-18 9788
表单开发包括：布局、验证、加载、提交、清除、重置等。 效果图如下： 表单布局 使用HTML Table标签实现任意丰富的表单布局： table class="form-table" border="0" cellpadding="1" cellspacing="2"> tr> td class="form-label" style="width:60px;
element表单验证validate()方法不执行
最新发布
budandan1221的博客
10-17 183
自定义表单校验方法中漏加了callback()出错。
Miniui 表单验证
weixin_30675247的博客
04-13 856
自定义表单验证： 　　input输入框的表单验证可通过vtype和onvalidation事件两种方式实现 　　可编辑列表（例如div）的表单验证只能通过vtye来实现表单验证 （1）vtype方式： 　　jsp页面通过属性设置：vtype="NaN" 　　js： //验证课程列表中的内容是否全为数字 mini.VTypes["NaN"] = function (v) { ...
miniui中表单验证规则总结
weixin_30681121的博客
09-13 579
页面链接： http://www.miniui.com/demo/#src=form/rules.html 页面效果图： 页面代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
ARTS Share6 miniUI getData(true,false)获取form表单数据问题
墨笙弘一
05-15 3710
昨天在写报表新增画面的时候，遇到一个问题，首次新增是完全成功的，而且新增后新增画面会自动刷新，将新增的数据显示到画面，然后可以进行修改，然后对数据保存。 流程： 新增一条数据 点击保存按钮，数据库insert一条数据 画面自动刷新，新增数据显示在画面上 可以对数据进行修改，点击保存 问题：当第二次点击保存的时候，本来应该是对前一次新增的数据进行更新，但是我发现数据库里面多了一条数据，然后开始查...
Miniui树形和验证
11-30
MiniUI提供了丰富的验证规则，包括非空验证、长度验证、格式验证（如邮箱、电话号码）、自定义函数验证等。用户可以使用预设的验证规则，也可以根据需求编写自己的验证逻辑。验证结果将以醒目的方式反馈给用户，提升...
MiniUI官方表单验证示例
tanghuan0827的博客
02-05 1656
绑定validation事件 <span style="color:#aa090f"><input id="username" name="username" onvalidation="onUserNameValidation" class="mini-textbox" required="true" /> </span> <span style="color:#aa090f">function onUserNameValidation(e) { .
miniuiDemo
12-03
MiniUI的数据单元格可以设置样式、格式化数据，还支持各种验证规则，确保输入数据的有效性。 4. **数据网格（Datagrid）**：数据网格是一种强大的组件，用于展示大量结构化的数据。它通常包含可排序、过滤、分页的...
jQuery MiniUI 开发教程 表单控件 表单：数据验证（三）
iteye_4698的博客
09-28 408
[b]表单验证[/b] [img]http://www.miniui.com/docs/api/images/form.gif[/img] 参考示例： [url=http://www.miniui.com/demo/form/rules.html]验证规则 [/url] [url=http://www.miniui.com/demo/form/validation.html]表单验证...
jQuery MiniUI开发系列之：数据验证
Ling_PF的博客
06-21 4434
在开发应用系统界面时，往往需要进行很多、复杂的数据验证，当填写的数据符合规定，才能提交保存。 jQuery MiniUI提供了比较完美的表单数据验证和错误显示的方式。 常见的表单控件，都有一个验证事件"validation"。 通过监听处理“validation”事件，我们可以自定义验证规则逻辑、是否验证通过、验证错误描述等。 //监听处理"validation"事件 t
使用mixins，实现elementUI表单的全局验证
w18478272407的博客
04-02 680
使用ElementUi搭建框架的时候，大家应该都有考虑过怎么做全局验证，毕竟复制粘贴什么的是最烦了，这里分享下个人的解决方法。 验证规则 分析规则 一般验证规则，主要是是否必填，不为空，以及参数类型的验证。基于这个条件，我们开始找找思路, 单个字段的验证是这样的： name: { required: 是否必填, validator: 自定义规则, message: 失败...
element ui 输入框只能输入数字限制
灰太狼-铜豌豆的博客
08-20 1891
<el-input v-model="formAdd.xh" placeholder="请输入序号" maxlength="2" @input="formAdd.xh=formAdd.xh.replace(/^(0+)|[^\d]+/g,'')" ...
miniui表单验证守则总结
weixin_30408675的博客
06-22 186
1，页面效果图 2，代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://...
mini Ui表格中单元格编辑添加校验规则
qq_35915357的博客
04-22 1854
mini Ui表格中单元格编辑添加校验规则 ** 这两天做项目的时候遇到一个需求dataGrid某一列可编辑列与某一列或者一个变量做比较** 首先想到了三种实现方式：onblur、onValidation以及在保存按钮事件中增加循环遍历校验（两写法） <div id="dataGrid" dataFiled="infos" class="nui-datagrid"> <d...
miniUI中如何实现前端数据验证
前端数据验证是指在前端页面中对用户输入的数据进行合法性验证的过程。通过对用户输入的数据进行验证，可以保证数据的准确性、完整性和安全性，提高用户体验和系统的稳定性。 在Web开发中，前端数据验证是一个非常...
ElementUI表单验证规则
CongJiYong的博客
06-14 692
表单验证规则
uni-app form表单校验
热门推荐
票票的博客
01-13 2万+
插件 主要对 name 字段进行必填验证，提交事件通过 form-type 绑定 <uni-forms ref="signUpForm" :value="signUpFormData" :rules="rules"> <uni-forms-item label="" name="username"> <uni-easyinput type="number" placeholder="请输入登录手机号码" v-model="signUpFormData.username"
Mint-UI组件 MessageBox为prompt 添加判断条件
weixin_30797027的博客
03-06 135
Mint-UI 的Message Box 是prompt类型时，可以添加正则判断或者function判断条件。具体可以查看Mint-UI源码。 添加正则判断条件： MessageBox({ $type:'prompt', title:'输入验证码', message:'请填写您收到的验证码', closeOnClickModal:f...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值