使用EasyUI一般处理程序完成form表单验证
使用EasyUi来完成form表单验证首先要引用文件
<link href="EasyUI/themes/material/easyui.css" rel="stylesheet" /> <link href="EasyUI/themes/icon.css" rel="stylesheet" />--图片样式 <script src="EasyUI/jquery.min.js"></script> <script src="EasyUI/jquery.easyui.min.js"></script> <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>--使用语言
样式:
<style>
* {
margin: 0px;
padding: 0px;
}
#big {
width: 100%;
height: 1200px;
position:relative;
}
.logBanner {
width:100%;
height:100%;
}
#addProce {
position:static;
}
td {
width:300px;
}
.textbox {
width:280px;
height:40px;
line-height:40px;
font-size:18px;
}
.ICP {
width: 100%;
height: 170px;
line-height: 70px;
text-align: center;
background: #cecaca;
position:absolute;
}
</style>
代码:
<div id="big">
<div id="addProce">
<form id="form" method="post">
<table style="width: 460px; border: 0px;" cellspacing="20">
<tr>
<td>
<div style="text-align: right;font-size:18px">姓名:</div>
</td>
<td>
<input id="Name" name="Name" class="easyui-validatebox textbox" data-options="required:true," missingmessage="请输入你的用户姓名"/>
</td>
</tr>
<tr>
<td>
<div style="text-align: right;font-size:18px">性别:</div>
</td>
<td>
<select class="easyui-validatebox textbox" id="Sex" name="Sex" style="width:100px" >
<option value="1">男</option>
<option value="2">女</option>
</select>
</td>
</tr>
<tr>
<td>
<div style="text-align: right;font-size:18px">密码:</div>
</td>
<td>
<input id="pwd" name="pwd" type="password" class="easyui-validatebox textbox" data-options="required:true" />
</td>
</tr>
<tr>
<td>
<div style="text-align: right;font-size:18px">重复密码:</div>
</td>
<td>
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox textbox" required="required" validtype="equals['#pwd']" />
</td>
</tr>
<tr>
<td>
<div style="text-align: right;font-size:18px">邮箱:</div>
</td>
<td>
<input id="proe-mail" name="proe-mail" class="easyui-validatebox textbox" validtype="e-mail" data-options="required:true," invalidmessage="请输入正确邮箱地址" missingmessage="请输入邮箱地址!" />
</td>
</tr>
<tr>
<td style="width: 121px; text-align: right;font-size:18px">电话号码:</td>
<td style="width: 189px">
<input id="Phone" name="Phone" class="easyui-validatebox textbox" data-options="required:true," invalidmessage="手机号有效长度11" missingmessage="请输入11位电话号码" maxlength="11" />
</td>
</tr>
</table>
</form>
</div
布局后的运行效果:
验证两次密码是否一致
$.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function (value, param) {
return value == $(param[0]).val();
},
message: '两次密码不一致!'
}
});
添加点击事件:
$("#addProce").dialog({
title: "添加用户信息",
width: 580,
height:500,
modal: true,
buttons: [{
text: "注册",
iconCls: "icon-add",
handler: function () {
console.info("添加用户信息");
$.messager.progress({ text: "数据载入中....." });
$("#form").form("submit", {
url: "LoginHandlers.ashx",
success: function (data) {
if (data == "ok") {
$.messager.alert("提示", "添加成功");
$.messager.progress("close");
window.location = "Login.aspx?name=" + $("#Name").val();
}
else {
$.messager.alert("提示", "添加失败");
$.messager.progress("close");
}
},
onSubmit: function () {
if ($("#form").form("validate") == false) {
$.messager.progress("close");
$.messager.alert("警告", "请将各项按要求填写完整");
}
console.info($("#form").form("validate"));
return $("#form").form("validate");
}
}
)
}
},
{
text: "取消",
iconCls: "icon-remove",
handler: function () {
console.info("取消");
}
}]
});
如果不填写任何值进行提交就会进行提示:
在一般处理处理程序来接受传过去的值:
string name = "";
string phone = context.Request["Phone"].ToString();
string Name = context.Request["Name"].ToString();
string sex = context.Request["Sex"].ToString();
string ProEmail = context.Request["proe-mail"].ToString();
string pwd = context.Request["pwd"].ToString();
//context.Response.Write("Hello World");
//接收性别的值是0或1而不是男和女,所以需要进行判断一下。
if (sex == "1")
{
name = "男";
}
else
{
name = "女";
}
bool bl = ReginstManage.InsertUser(Name, name, ProEmail, phone, pwd);
if (bl)
{
context.Response.Write("ok");
}
else
{
context.Response.Write("off");
}
在前台的"submit"里面进行返回值得判断,如果添加成功则输出"ok",否则就是不成功!
使用EasyUI的好处是不用自己写验证方式,别人已经给你写好了,我们只需要按照他们的要求即可,是比较方便的!!!