页面链接：
/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"&
&html xmlns="http://www.w3.org/1999/xhtml"&&head&
&title&表单验证规则总结&/title&
&meta http-equiv="content-type" content="text/ 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"&
text-align:
padding-left:15
font-size:13
font-family:T
&/style&&/head&&body&
&h1&表单验证规则总结&/h1&
&div id="form1" &
&td class="td1"&不允许为空：&/td&
&input class="mini-textbox" required="true" /&
&td class="td2"&required="true"&/td&
&td class="td1"&必须是邮箱地址：&/td&
&input class="mini-textbox" vtype="email" required="true"/&
&td class="td2"&vtype="email"&/td&
&td class="td1"&必须是URL：&/td&
&input class="mini-textbox" vtype="url" required="true"/&
&td class="td2"&vtype="url"&/td&
&td class="td1"&必须是整数(int)：&/td&
&input class="mini-textbox" vtype="int" required="true"/&
&td class="td2"&vtype="int"&/td&
&td class="td1"&必须是数字(float)：&/td&
&input class="mini-textbox" vtype="float" required="true"/&
&td class="td2"&vtype="float"&/td&
&td class="td1"&字符串长度（&= 6）：&/td&
&input class="mini-textbox" vtype="maxLength:6" required="true"/&
&td class="td2"&vtype="maxLength:6"&/td&
&td class="td1"&字符串长度（&= 2）：&/td&
class="mini-textbox" vtype="minLength:2" required="true"/&
&td class="td2"&vtype="minLength:2"&/td&
&td class="td1"&字符串长度（2-6）：&/td&
&input class="mini-textbox" vtype="rangeLength:2,6" required="true"/&
&td class="td2"&vtype="rangeLength:2,6"&/td&
&td class="td1"&字符数个数（2-6）：&/td&
&input class="mini-textbox" vtype="rangeChar:2,6" required="true"/&
&td class="td2"&vtype="rangeChar:2,6"&/td&
&td class="td1"&数字范围（0-100）：&/td&
&input class="mini-textbox" vtype="range:0,100" required="true"/&
&td class="td2"&vtype="range:0,100"&/td&
&td class="td1"&必须是日期格式（如yyyy-MM-dd）：&/td&
&input class="mini-textbox" vtype="date:yyyy-MM-dd" required="true"/&
&td class="td2"&vtype="date:yyyy-MM-dd"&/td&
&td class="td1"&必须是日期格式（如MM/dd/yyyy）：&/td&
&input class="mini-textbox" vtype="date:MM/dd/yyyy" required="true"/&
&td class="td2"&vtype="date:MM/dd/yyyy"&/td&
&td class="td1" style="color:R"&邮箱格式，5~20个字符（组合）：&/td&
&input class="mini-textbox" vtype="rangeLength:5,20;" required="true"/&
&td class="td2"&vtype="rangeLength:5,20;"&/td&
&td class="td1" style="color:R"&必须输入英文（自定义）：&/td&
&input class="mini-textbox" onvalidation="onEnglishValidation" /&
&td class="td2"&onvalidation="onEnglishValidation"&/td&
&td class="td1" style="color:"&必须输入英文（自定义vtype）：&/td&
&input class="mini-textbox" vtype="english"/&
&td class="td2"&vtype="english"&/td&
&td class="td1" style="color:R"&必须输入英文+数字（自定义）：&/td&
&input class="mini-textbox" onvalidation="onEnglishAndNumberValidation" /&
&td class="td2"&onvalidation="onEnglishAndNumberValidation"&/td&
&td class="td1" style="color:R"&必须输入中文（自定义）：&/td&
&input class="mini-textbox" onvalidation="onChineseValidation" /&
&td class="td2"&onvalidation="onChineseValidation"&/td&
&td class="td1" style="color:R"&身份证验证15~18位（自定义）：&/td&
&input class="mini-textbox" onvalidation="onIDCardsValidation" /&
&td class="td2"&onvalidation="onIDCardsValidation"&/td&
&input value="Login" type="button" onclick="submitForm()" /&
&/table&&/div&
&script type="text/javascript"&
mini.parse();
function submitForm() {
var form = new mini.Form("#form1");
form.validate();
if (form.isValid() == false)
//提交数据
var data = form.getData();
var json = mini.encode(data);
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 =
function onEnglishAndNumberValidation(e) {
if (e.isValid) {
if (isEnglishAndNumber(e.value) == false) {
e.errorText = "必须输入英文+数字";
e.isValid =
function onChineseValidation(e) {
if (e.isValid) {
if (isChinese(e.value) == false) {
e.errorText = "必须输入中文";
e.isValid =
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 =
////////////////////////////////////
/* 是否英文 */
function isEnglish(v) {
var re = new RegExp("^[a-zA-Z\_]+$");
if (re.test(v))
/* 是否英文+数字 */
function isEnglishAndNumber(v) {
var re = new RegExp("^[0-9a-zA-Z\_]+$");
if (re.test(v))
/* 是否汉字 */
function isChinese(v) {
var re = new RegExp("^[\u4e00-\u9fa5]+$");
if (re.test(v))
/*自定义vtype*/
mini.VTypes["englishErrorText"] = "请输入英文";
mini.VTypes["english"] = function (v) {
var re = new RegExp("^[a-zA-Z\_]+$");
if (re.test(v))
&div class="description"&
&h3&Description&/h3&
&/div&&/body&&/html&
阅读(...) 评论()MiniUI汇总_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
MiniUI汇总
上传于|0|0|暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩44页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢&&&&&&&&&&&
本文将介绍一下，在ASP.NET MVC环境下，如何用Jquery MiniUI中的Datagrid控件载入数据。
1.效果展示：
2.具体步骤：
1&& 既然是在MVC里，那我们的界面自然选择cshtml，界面内代码如下：
1 &!--需要引用的文件--&
2 &link href="~/Content/StyleSheet1.css" rel="stylesheet" /&
3 &script src="~/Scripts/jquery-1.8.2.js"&&/script&
4 &link href="~/Content/miniui.css" rel="stylesheet" /&
5 &script src="~/Scripts/miniui.js"&&/script&
6 &link href="../../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" /&
7 &style type="text/css"&
margin-top: 0;
11 &/style&
13 &div id="datagrid1" class="mini-datagrid" style="width:600height:380" url="JsonHtml" allowresize="true" sizelist="[10,20,30,50]"
14 pagesize="10" allowcellselect="true" multiselect="true"&
&div property="columns"&
&div type="checkcolumn" headeralign="center" ="center"&&/div&
&div type="indexcolumn" headeralign="center" ="center"&序号&/div&
&div field="d1" headeralign="center" ="center" width="80"&时间&/div&
&div field="d2" headeralign="center" ="center" width="80"&赛制&/div&
&div field="d3" headeralign="center" ="center" width="80"&战绩&/div&
Head标签内代码
2& 完成界面上内容以后，其实布局已经出来，但是这个DataGrid是没有数据的，它的数据来源就是那个 div-url 的属性，它的属性是一个返回值（就是后台的一个方法名），另外这个方法还需要两个辅助的方法，具体代码如下：
1 public void JsonHtml()
int sum = 10;
DataTable dt = new DataTable();
DataColumn dc1 = new DataColumn("d1", Type.GetType("System.String"));
DataColumn dc2 = new DataColumn("d2", Type.GetType("System.String"));
DataColumn dc3 = new DataColumn("d3", Type.GetType("System.String"));
dt.Columns.Add(dc1);
dt.Columns.Add(dc2);
dt.Columns.Add(dc3);
//循环添加数据
for (int i = 1; i & sum + 1; i++)
DataRow dr = dt.NewRow();
dr["d1"] = "";
dr["d2"] = "排位赛 第" + i + "场";
dr["d3"] = "10杀 0死 0助攻";
dt.Rows.Add(dr);
//设置表的页码，如果缺失，会导致数据无法显示
int pageIndex = Convert.ToInt32(Request["pageIndex"]);
int pageSize = Convert.ToInt32(Request["pageSize"]);
//将数据转换相应的格式
ArrayList AlData = DataTableToArrayList(dt);
int index = pageIndex, size = pageS
ArrayList data = new ArrayList();
int start = index * size, end = start +
for (int i = 0, l = AlData.C i & i++)
Hashtable record = (Hashtable)AlData[i];
if (record == null) continue;
if (start &= i && i & end)
data.Add(record);
Hashtable result = new Hashtable();
result["data"] =
result["total"] =
//输出数据和总条数
Response.Write(MyEncode(result));
后台JsonHtml()
1 public static string MyEncode(object o)
if (o == null || o.ToString() == "null") return null;
if (o != null && (o.GetType() == typeof(String) || o.GetType() == typeof(string)))
return o.ToString();
IsoDateTimeConverter dt = new IsoDateTimeConverter();
dt.DateTimeFormat ="yyyy'-'MM'-'dd'T'HH':'mm':'ss";
return JsonConvert.SerializeObject(o, dt);
后台MyEncode()
1 private static ArrayList DataTableToArrayList(DataTable data)
ArrayList array = new ArrayList();
for (int i = 0; i & data.Rows.C i++)
DataRow row = data.Rows[i];
Hashtable record = new Hashtable();
for (int j = 0; j & data.Columns.C j++)
object cellValue = row[j];
if (cellValue.GetType() == typeof(DBNull))
cellValue = null;
record[data.Columns[j].ColumnName] = cellV
array.Add(record);
后台DataTableToArrayList()
3& 接下来我们就可以运行编译，查看效果了，值得注意的是： 官网所给出属性列表很多，需要的样式需要仔细调试，比如显示分页...就得多看它的API了。
技术文档：
第一次如此欢快的写技术文档，如有纰漏，还请指正！
阅读(...) 评论()jQuery MiniUI - 快速开发WebUI
参考示例：
绑定validation事件
&input id="username" name="username" onvalidation="onUserNameValidation" class="mini-textbox" required="true" /&
function onUserNameValidation(e) {
if (e.isValid) {
if (isEmail(e.value) == false) {
e.errorText = "必须输入邮件地址";
e.isValid = false;
validation事件是实现验证的基础。
&input class="mini-textbox" vtype="email"/&
TextBox内置了vtype属性，有如下验证规则：email、url、int、float、maxLength、minLength、rangeLength、rangeChar、range、date等。
var form = new mini.Form("#form1");
form.validate();
if(form.isValid()){
alert("验证成功");启用vType和required=false时仍提示格式问题 - BUG报告和需求建议 - jQuery MiniUI -
Powered by Discuz! Archiver
启用vType和required=false时仍提示格式问题
启用vType和required=false时仍提示格式，应该是启用了required=false后只有在输入内容后才校验格式。
格式问题是什么意思
fcrong 发表于
21:04 static/image/common/back.gif
格式问题是什么意思
就是比如说设的是vType=&email& required=false ；当没有输入任何内容时仍然提示邮件格式不对。
你这样说就很清楚了。
你下载最新版试试。
niko 发表于
12:26 static/image/common/back.gif
你这样说就很清楚了。
你下载最新版试试。
还是存在的吧，我刚下的新版本试过的。难道你们修改了没放上去？
请看示例：/demo/form/validation.html
我们用IE和FF测试都是可以的。
niko 发表于
17:21 static/image/common/back.gif
请看示例：/demo/form/validation.html
我们用IE和FF测试都是可以的。
我的意思是：有个输入框比如是人的邮箱，这个邮箱当输入数据之后才校验格式，若没有输入数据的话则不需要进行校验（在表单的输入校验时是通过的）。
总算明白了。。。
这个我不太赞同。
既然你定义了一个输入框，格式为“邮箱”，那为空，说明数据还是不对的，就必须校验。
niko 发表于
10:03 static/image/common/back.gif
总算明白了。。。
这个我不太赞同。
既然你定义了一个输入框，格式为“邮箱”，那为空，说明数据还是不对的 ...
先别管这种应用场景，目前我是否可以理解为vType和required=false是冲突的？
再说回应用场景，邮箱字段本身是不必填的，只是希望当用户输入了数据才进行格式校验，不知现在是否可以实现？
我也需要这种验证，有输入数据的时候才进行验证，若没有输入数据则不进行验证，貌似控件的这俩个属性同时存在的时候vtype是优先的
查看完整版本: