繁琐的网页验证怎么更简单

类型：浏览辅助大小：38.5M语言：中文评分：10.0
标签：

立即下载

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

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方法来进行验证。本来可以扩展这些控件来添加标签，但是我觉得验证控件一多，对程序员反而是不好的事，找还找半天。权衡一下，还是用丑陋的方法实现比较划得来。