MiniUi总结

最新推荐文章于 2024-05-22 13:30:53 发布
最新推荐文章于 2024-05-22 13:30:53 发布
阅读量3.4k 收藏 13
点赞数
分类专栏： 前端 文章标签： miniui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Abracadabra__/article/details/84397375
版权

1、输入框样式

class="mini-textbox"    //普通输入框
class="mini-password"    //密码输入框
class="mini-textarea"    //文本输入框
lass="mini-datepicker"    //日期选择（value="2010-10-12"）
class="mini-spinner"    //数字框（value="22" minValue="10" maxValue="50"）
class="mini-timespinner"    //时间微调（format="H:mm"）
class="mini-checkbox"    //选择框（value="Y" trueValue="Y" falseValue="N"）
class="mini-combobox"    //下拉选择框（showNullItem="true" url="../data/countrys.txt" textField="text" valueField="id" value="cn"）
class="mini-treeselect"    //树选择框（url="../data/listTree.txt" multiSelect="true" textField="text" valueField="id" parentField="pid" checkRecursive="true"
                            value="ajax"）
class="mini-checkboxlist"    //复选框（repeatItems="3" repeatLayout="flow" url="../data/countrys.txt" value="cn,de,usa" textField="text" valueField="id"）
class="mini-radiobuttonlist"    //单选框（value="en" repeatItems="4" repeatDirection="vertical" repeatLayout="table" url="../data/countrys.txt"
textField="text" valueField="id"）
class="mini-listbox"    //展开的选择框（url="../data/countrys.txt" value="fr" textField="text" valueField="id" style="height:120px;"）

2、输入校验

<!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>

3、表单操作

class="mini-datagrid"
if (form.isValid() == false) return;
var form = new mini.Form("#form1");
var data = form.getData();      //获取表单多个控件的数据
form.setData(data);    //设置控件数据
form.unmask();
form.clear();    //清除表单
form.reset();    //重置表单

4、注意
**4.1、**Miniui中的mini.pause()语句要写，要不然后面的用到mini会失效。
**4.2、**习惯F12看JS是否报错！！！有时间学会调试‘’
**4.3、**页面加载完之后就运行的函数$(function() ，JS的运行顺序是按照HTML中

$(function() {
		//为多记录渲染字典项提供数组容器
		$("#cxJg").data("miniDictData", {});
		kfsglBtn.doQuery();
	})

**4.4、**在html页面中声明全局变量，在其他的js文件中都可以用到
HTML页面中声明js
**4.5、**要使用service中得到的值，现在页面开始加载之前使用<%执行java代码，声明变量%>，用<%=%>在html中引用变量

<%  
	String ctx = request.getContextPath();
	String rightid = DTOUtil.getValue("RightID");   //权限id
	String operId=(String)request.getSession().getAttribute("OPERID");  //得到当前操作员id
	IOperator Operator = null;
    Object obj = request.getSession().getAttribute(ConVar.LOGIN_SESSION_ID);
    if(obj != null){  
        Operator = (IOperator)obj;
     }
    String operPosition=Operator.getPOSITION();		//获取当前用户的开发商id
    String operType=Operator.getOperType();  		//获取当前用户的管理员类型
%>

<input class="mini-hidden" name="OPERID" id="OPERID" value="<%=operId%>"/>
<input class="mini-hidden" name="OPERPOSITION" id="OPERPOSITION" value="<%=operPosition%>"/>
<input class="mini-hidden" name="OPERTYPE" id="OPERTYPE" value="<%=operType%>"/>

4.6、 JS闭包示例
1、声明一个变量，该变量指定一个函数；
2、声明该变量的_KfsglInit.prototype={函数1，函数2…}
3、建立一个该变量的实例，var kfsglInit = new _KfsglInit();
4、该变量里面所有的函数都实例+函数名进行调用，在该变量函数内部也是通过该方式调用。

var _KfsglInit = function() {};
_KfsglInit.prototype = {
	  fInitialize : function(options) {},
	  fnPageInit : function(){	  
	  },
	  
	  /**
	   * 初始化表格
	   */
	  onActionRenderer: function(e) {
		  var record = e.record;
		  var column = e.column;
		  var rowIndex = e.rowIndex;
		  var id = record.ID;	 
		  var kfsmc = record.KFSMC;
		  if (column.name == 'CZ') {
			  e.cellHtml = ' <a class="Edit_Button" href="javascript:kfsglBtn.selectRow(\'' + id + '\')" >查看</a>'
              + ' <a class="Delete_Button" href="javascript:kfsglBtn.updateRow(\'' + id + '\')">修改</a>'
              + ' <a class="Delete_Button" href="javascript:kfsglBtn.deleteRow(\'' + id + '\''+','+'\'' + kfsmc + '\')">删除</a>';
		  }
	  }
};
var kfsglInit = new _KfsglInit();

**4.7、**属性和方法
1、miniui中得到form； var form = new mini.Form("#xtxzForm");
5、miniui中得到form的值 ；var params = form.getData(true);
2、miniui中设置form不可编辑 ；form.setEnabled(false);
3、miniui中得到控件，设置控件是否可以编辑 ；mini.get(“SSKFS”).setEnabled(false);
4、miniui中得到控件，得到控件是否可以编辑 ；mini.get(“SSKFS”).getEnabled();
6、miniui中判断控件是否可以编辑；mini.get(“XTMC”).enabled==false
7、miniui中得到控件，设置控件的值 ；mini.get(“KFSID”).setValue(kfsid);
8、miniui中得到控件，得到控件的值 ；var value=mini.get(“KFSID”).getValue();

码笼包
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
MiniUI快速入门教程（四）表单开发
Ling_PF的博客
07-18 9660
表单开发包括：布局、验证、加载、提交、清除、重置等。 效果图如下： 表单布局 使用HTML Table标签实现任意丰富的表单布局： table class="form-table" border="0" cellpadding="1" cellspacing="2"> tr> td class="form-label" style="width:60px;
miniui datagrid 合并单元格
08-28
#### 五、总结 通过上述对McMergeCells函数的详细解析，我们可以看出这是一种非常实用且高效的单元格合并方法。它不仅能够自动识别哪些单元格可以被合并，还能够确保合并后的效果符合预期。在实际应用中，这种方法...
miniui demo
09-04
miniui demo，以及java版本demo，适合minniui的学习者使用。
miniui表格mock数据、自定义表格列显示及JS操作
最新发布
hrcsdn13的博客
05-22 179
miniui表格mock数据、自定义表格列显示及JS操作
miniui的单选框
weixin_34321753的博客
11-24 4149
2019独角兽企业重金招聘Python工程师标准>>> ...
miniui笔记
weixin_46100406的博客
06-03 417
要求：把下拉框设置为年 不要月日 type=“year” 要求：并且设置默认为为今年的上一年： mini.get(“nd”).setValue(new Date().getFullYear()-1); 重置表单 // var form = new mini.Form("#searchForm"); // form.reset(); 获取行业层级： 1.input 标签加入 onnodeclick=“nodeclick” 然后在js文件最外层写入 // function nodeclick(e) {
miniui的小知识点
背着梦的幸存者
03-22 1305
1、miniui表单只读 2、安装使用miniui
jQuery MiniUI 快速入门：表单开发（四）
iteye_4698的博客
09-10 390
表单开发包括：布局、验证、加载、提交、清除、重置等。 效果图如下： [img]http://www.miniui.com/docs/quickstart/images/form.gif[/img] [b]表单布局[/b] 使用HTML Table标签实现任意丰富的表单布局： 姓名： ...
miniui_java_myeclipse.rar_miniui
09-19
8. 总结： MiniUI结合MyEclipse，为Java Web开发者提供了一个强大的工具集，帮助他们构建高性能、高交互性的Web应用。通过深入学习和实践，你可以掌握如何利用MiniUI提升开发效率，为用户提供更好的用户体验。
miniui图书管理练习
05-06
总结起来，"miniui图书管理练习"项目是一个实践前后端分离和HTTP请求方法的好例子，对于理解MiniUI框架的应用、POST和GET请求的差异以及如何在实际项目中组织和处理请求具有很高的教学价值。通过这个项目，开发者...
jquery miniui 教程 表格控件 合并单元格应用
12-12
总结来说，jQuery MiniUI 的表格控件通过 `mergeCells` 方法提供了一种简便的方式来合并单元格，以满足不同的布局和展示需求。结合适当的事件监听和数据处理，可以实现各种自定义的表格展示效果，提升用户体验。在...
miniui使用说明
10-09
miniui安装使用说明，由于版权原因，不再将miniui源码放上了。请谅解
miniui_php.rar
06-20
总结来说，MiniUI_PHP在Delphi环境中的应用涉及到前端与后端的协同工作，通过PHP处理业务逻辑和数据库操作，Delphi则负责网络通信和展示界面。这种架构充分利用了MiniUI的前端优势和PHP的后端灵活性，为开发跨平台的...
miniui表单验证守则总结
woodking
10-13 3967
miniui表单验证守则总结 转载：https://www.cnblogs.com/wllcs/p/5607890.html 1，页面效果图 2，代码实现   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit...
miniui 文本框验证
weixin_34018169的博客
08-22 870
原文 ： http://www.miniui.com/demo/#src=form/rules.html 转载于:https://www.cnblogs.com/xinbaba/p/7411616.html
miniUI设置输入框禁止输入和开启
sayabluecup的博客
07-15 9748
背景： 用 input标签 enabled="false" 属性设置为禁止输入后js怎么也不开开启输入 错误中的尝试： 解决办法 使用miniUI获取对象，并设置属性就好了 解决代码： ...
MINIUI的使用以及一些常用小知识（前端）
beLaity的博客
08-04 4425
MINIUI的使用 在miniui的官网下载资源包 用编辑器打开下载好的文件，打开WebContent文件夹下的demo文件夹可以查阅 js中要有mini.parse() 否则他不是miniui的控件，就用不了miniui中的方法 详情请查看miniui官网api手册 miniui的官网还有一些demo在线就可以查看，并且还有源码方便查阅 输入框样式 class=“mini-textbox” //普通输入框 class=“mini-password” //密码输入框 class=“mini-te
miniUI使用以及遇到的一些问题
JKPurpleV的博客
09-29 2047
miniUI中的input值如何传到后台
miniUI实现指定行可编辑，其他行仍然只读
zidieq的博客
10-25 1529
miniUI实现指定行可编辑，其他行不可编辑
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值