Form表单提交与Validform验证的那些事
来源:互联网 发布:保温杯十大排名 知乎 编辑:程序博客网 时间:2024/05/20 18:19
不管是做登录、注册还是实体的添加、修改,我们都会用到表单,并且也会同时用到验证,这里结合Validform验证来详细说明form表单提交的内情。。
1. 引入文件
<link href="css/validate.css" rel="stylesheet" /><script src="scripts/jquery/jquery-1.11.2.min.js"></script><script src="scripts/jquery/Validform_v5.3.2_min.js"></script>
2. form表单
<form method="post" action="register.aspx" id="register" runat="server"> <div class="zczh"> <h2>注册账号</h2> <div class="form-group"> <dl> <dt><i>*</i> 用户名:</dt> <dd> <asp:TextBox ID="userName" runat="server" ajaxurl="/tools/validreg.ashx?regType=validName" CssClass="form-control" datatype="s4-20" nullmsg="请输入用户名" errormsg="请输入4~20位字符" sucmsg=" " placeholder="4~20个字符,只接受字母和数字,建议用公司缩写"></asp:TextBox> </dd> <dd class="inline-block"></dd> </dl> <dl> <dt><i>*</i> 密码:</dt> <dd> <asp:TextBox ID="txtPassword" runat="server" CssClass="form-control" TextMode="Password" datatype="*6-20" nullmsg="请设置密码" errormsg="密码范围在6-20位之间" sucmsg=" " placeholder="可由6-16位英文、数字及标点组成"></asp:TextBox> </dd> <dd class="inline-block"></dd> </dl> <dl> <dt><i>*</i> 确认密码:</dt> <dd> <asp:TextBox ID="txtPassword1" runat="server" CssClass="form-control" TextMode="Password" datatype="*" recheck="txtPassword" nullmsg="请再次输入密码" errormsg="两次输入的密码不一致" sucmsg=" " placeholder="请再输入一次密码"></asp:TextBox> </dd> <dd class="inline-block"></dd> </dl> <dl> <dt><i>*</i> 电子邮箱:</dt> <dd> <asp:TextBox ID="txtEmail" runat="server" ajaxurl="/tools/validreg.ashx?regType=validEmail" CssClass="form-control" datatype="e" nullmsg="请输入电子邮箱" sucmsg=" " placeholder="格式如:****@163.com"></asp:TextBox> </dd> <dd class="inline-block"></dd> </dl> <dl> <dt><i>*</i> 手机号码:</dt> <dd> <asp:TextBox ID="txtTel" runat="server" ajaxurl="/tools/validreg.ashx?regType=validPhone" CssClass="form-control" datatype="/^1(3|4|5|7|8)\d{9}$/" nullmsg="请输入手机号码" sucmsg=" " placeholder="请输入手机号码"></asp:TextBox> </dd> <dd class="inline-block"></dd> </dl> <dl> <dt><i>*</i> 图形验证码:</dt> <dd> <asp:TextBox ID="txtImgCode" runat="server" ajaxurl="/tools/validCheckColorCode.ashx?regState=1" CssClass="form-control" datatype="*" nullmsg="请输入右侧图形验证码" sucmsg=" " placeholder="请输入右侧图形验证码" Width="215px"></asp:TextBox> <div style="display: inline-block; vertical-align: middle; height: 40px; width: 80px; margin-top: -2px; overflow: hidden; border: 1px solid #ddd;"> <a href="javascript:void(0);" id="refreshCode"> <img id="imgVerify" src="ColorCheckCode.aspx?" title="看不清点击更换" align="absmiddle" onclick="this.src=this.src+'?'" style="cursor: pointer; height: 42px; margin-top: -1px; margin-left: -1px;" /></a> </div> </dd> <dd class="inline-block"></dd> </dl> <dl> <dt><i>*</i> 短信验证码:</dt> <dd> <asp:TextBox ID="txtTelCode" runat="server" CssClass="form-control" datatype="n6" nullmsg="请输入手机收到的短信验证码!" errormsg="请输入手机收到的短信验证码!" sucmsg="<font color='green'>恭喜您,验证成功!</font>" ajaxurl="" Width="181px"></asp:TextBox> <div style="display: inline-block; vertical-align: middle; margin-top:-8px; height: 38px;" id="divSend"> <a class="telcode" id="getCode" href="#">获取短信验证码</a> </div> </dd> <dd class="inline-block"></dd> </dl> <div class="form-group1" id="divSubmit"> <asp:Button ID="btnSubmit" runat="server" CssClass="btn input-submit" Text="立即注册" OnClick="btnSubmit_Click" /> </div> </div> </div> <p class="ydxy center"> <span>已有账号?<a href="member/Login.aspx">立即登录</a></span> </p></form>
3. js初始化表单验证
$(function () { var valid_rule = $("#register").Validform({ datatype: {//传入自定义datatype类型,可以是正则,也可以是函数(函数内会传入一个参数); "n6": /^\d{6}$/ }, tiptype: 2 }); $("#txtTel").blur(function () { $("#txtTelCode").attr("ajaxurl", "/tools/validreg.ashx?regType=validCode&ctype=1&phone=" + $('#txtTel').val()); });});
4. 手机号是否重复验证示例
#region //手机号验证public void PhoneValid(HttpContext context){ string txtTel = DTRequest.GetString("param"); SqlParameter[] param = { new SqlParameter("@mobile", txtTel) }; int count1 = int.Parse(DbHelperSQL.GetSingle("select count(id) from lab_users where mobile=@mobile", param).ToString()); if (count1 == 0) { context.Response.Write("{ \"info\":\"<font color='green'>该手机号可用</font>\", \"status\":\"y\" }"); } else { context.Response.Write("{ \"info\":\"该手机号已注册过,请更换!\", \"status\":\"n\" }"); }}#endregion
5. 验证效果
当然这里只有密码是简单的使用validform的验证,其他都是采用ajax与validform的结合。
使用时注意事项如下:
(1) 如果仅仅使用validform的内置验证,在js中可直接简单的初始化就可以,如:$(“#register”).Validform({tiptype: 2}),里面的参数tiptype是表明要使用的错误提示方法,如果使用默认的可以去掉tiptype。
(2) 上述例子在js中可以自定义validform的验证,类似于在datatype属性中定义的“n6”,可以同样使用。
(3) 如用户名这样的验证是结合validform的内置验证与ajax的验证,即两种验证都有,其中ajax的验证可以使用属性ajaxurl指定相应的一般处理程序路径,具体使用可参考示例手机号重新验证方法。
(4) 因为手机号与短信验证码均需求验证,而我们又是必须先填手机号,在其验证通过并发送验证码(方法请参考ASP.NET发送手机短信验证码)后再对验证码进行验证,这里需要注意的是对验证码即控件txtTelCode的属性ajaxurl的设置必须是在对手机号验证通过后,这是一个先后顺序问题。这里采用的是在手机号控件的blur事件中设置,请参考上述js中的事件代码。
(5) 注意必须是submit的提交才会触发validform验证,这里的submit可以是type=”submit”的input控件,也可以是type=”submit”的button控件,当然如果你是用的服务器控件就更没问题了,因为所有服务器控件的事件都会触发validform的验证。
- Form表单提交与Validform验证的那些事
- form表单验证validform
- 关于Form表单的提交与验证???
- Validform使用入门(form表单验证)
- 表单验证validform的用法
- form 表单提交的那些事儿
- form 表单验证提交
- layui在form表单页面通过Validform加入简单验证
- 表单提交时要点击两次按钮(Validform验证)才能成功的解决方法
- 表单验证插件Validform的使用方法
- 关于验证表单插件Validform的用法
- Validform表单验证
- Validform表单验证
- validform表单验证
- form表单提交前验证
- form表单提交如何验证?
- form表单提交前验证
- form 表单提交前验证
- 个人项目总结---微信扫描二维码强制群发
- php小事日常记
- Spring MVC---DispatcherServlet配置
- 区块链2.0(五):Dapp构建去中心化自治社会
- Redis 集合
- Form表单提交与Validform验证的那些事
- 【Python】Python3 List max()方法
- CRC冗余校验算法&&MTU
- java
- matlab2c使用c++实现matlab函数系列教程-reshape函数
- 【个人笔记四】ART系统执行类方法流程分析
- Python range
- Linux开发工具(gcc gdb make shell)——动态库和静态库比较
- 浏览器升级提示网站:《快乐浏览》