软件发布

手机版,更便捷!

下载排行榜首页软件下载安卓下载资讯教程推荐专题装机必备
当前位置:文章资讯 > 编程开发 >

繁琐的网页验证怎么更简单?简单安全而非繁琐

时间:2016-12-29 浏览次数: 编辑:9upk

你是否被页面上这样的验证烦死:

function checkForm()

 if(document.getElementById("<%=this.textbox1.ClientID%>").value.length ==0)
{   
alert("不能为空");  
 return false;
}

又或者你已经封装了JS库,又或者你在用一些JS验证插件,但是还是得不停的一遍一遍写着正则,提示信息,等待返回结果.恩,我跟你一样,也烦透了!于是,我便做了个毛坯,到今天,把这个毛坯盖成了个茅草屋。好吧,来看看验证要做些什么工作吧。

介绍与使用

  Step 1:引入JS文件和CSS文件

  Step 2:拖入一个验证控件 选择验证类型,能否为空,提示信息等自己所需要的东西,这个例子中,我只选择了验证类型为邮箱,然后默认的允许为空改成了NO,不允许为空,其余都使用默认设置,

  Step 3:开始吧

  3.1: 这时候,鼠标hover上文本框的时候,右边出现了默认的提示,当然,有时候根据布局,你也可以调整Tip的方向,忘了说了,页面上还放了个提交按钮,给它添加了一个客户端事件

  3.2: 点击提交按钮,页面无变化,验证不通过

  3.3: 输入不匹配的字符,当文本框失去焦点的时候,提示验证没通过

  3.4:输入格式正确,OK

恩,其实验证我们就选了两下,验证就搞定了,我觉得蛮好,你觉得呢?

其实文本框的完成,基本的验证已经可以了,但是还有诸多的控件radio,radiobuttonlist,check,checkboxlist,select... 去他大爷的.OK,骂了它我也心里爽多了,继续吧:

OK,都可以了,只是验证提醒的样式忒丑了点,而且在IE下有更丑,如果您有更好看的实现,请发一份给我,我JS和CSS很差 :P,感激不尽。

原理

 看下源代码,什么都知道了,Textbox通过浏览器查看到的HTML代码是:
<input type="text" canempty="No" tip="请输入正确的邮箱地址格式" reg="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" id="TCTextBox1" name="TCTextBox1" gtbfieldid="19" class="verifyfailure">
Select,CheckboxList,Checkbox的HTML代码是:
 <select reg="0{1,}" tip="请选者一个" id="DropDownList1" name="DropDownList1" gtbfieldid="20" class="verifyfailure">
<option value="" selected="selected"></option>
<option value="aaaaaaa">aaaaaaa</option>
<option value="bbbbbbb">bbbbbbb</option>
<option value="cvvvvvv">cvvvvvv</option>

</select>
<table border="0" reg="0{3,}" tip="请选者3个" id="CheckBoxList1" original-title="" class="verifyfailure">
<tbody><tr>
<td><input type="checkbox" name="CheckBoxList1$0" id="CheckBoxList1_0"><label for="CheckBoxList1_0">aaaa</label></td><td><input type="checkbox" name="CheckBoxList1$1" id="CheckBoxList1_1"><label for="CheckBoxList1_1">bbb</label></td><td><input type="checkbox" name="CheckBoxList1$2" id="CheckBoxList1_2"><label for="CheckBoxList1_2">ccc</label></td>
</tr>
</tbody></table>
<span reg="0{1,}" tip="请选者" class="verifyfailure"><input type="radio" value="RadioButton1" name="RadioButton1" id="RadioButton1"></span>

  恩,扩展TextBox控件,添加了自定义属性reg 正则表达式,tip 提示信息,canempty 能否为空,然后用JS进行正则验证,通过验证的结果来添加 删除CSS,这里要注意的是,checkbox,radio生成出来的代码多了一个SPAN标签,checkboxlist,radiobuttonlist生成出来之后多了table标签,在JS文件中,我把它们的验证和文本框的验证分开了,独立了一个checkAspnetRadioCheckbox方法来进行验证。本来可以扩展这些控件来添加标签,但是我觉得验证控件一多,对程序员反而是不好的事,找还找半天。权衡一下,还是用丑陋的方法实现比较划得来。

标签:

上一篇:C#.NET常用的函数方法是什么?C#.NET常下一篇:SSAS不同环境几种部署方式是什么?SSAS

相关文章

最新评论

本类排行榜

图文专题

  • 类地下城割草手游推荐
  • 种菜小游戏
  • 单机打鱼游戏
  • 好玩的放置修仙手游