在很多情况下，我们对表单中的某些字段需要在客户端做简单的js验证，比如不能为空。按照传统的方式，我们可能就会去写一个函数来一个一个判断表单中的字符是否为空，为空则返回false，譬如：
- function validForm(){
- if( ( document.getElementById('name').value.length < 1 )
- &&( document.getElementById('pass').value.length < 1 )
- &&( document.getElementById('email').value.length < 1 )
- &&( document.getElementById('tel').value.length < 1 )
- &&( document.getElementById('gendar').value.length < 1 )){
- alert('带有*号的部分不能为空');return false;
- }
- }
那么如果使用了jQuery这一切可能便得更加简单，譬如下面这个表单
- <form id="reg" action="" method="post">
- <input type="text" class="important" id="name" name="name" />*<br />
- <input type="text" class="important" id="email" name="email" />*<br />
- <input type="text" class="important" id="gender" name="gender" />*<br />
- <input type="password" class="important" id="pass" name="pass" />*<br />
- </form>
不知道你是否注意到，上面凡是打*好的表单域，我都用了一个css属性，那就是”important”,这样的好处有两点，1.我们可以在css中将必须填写的字段用特殊的样式表来显示；2.方便在jquery中遍历，下面是jquery简单表单验证的函数
- function validForm(){
- var is_not_valid = false;
- if(this.value.length < 1){//如果表单为空
- i ++ ;//增加i
- is_not_valid = true;
- if( i < 2 )//因为这个遍历循环无法用break跳出，只能通过i自增的方式让js只弹出一次alert
- alert('带星号的必须填写');
- this.focus();
- }
- });
- if( is_not_valid ) return false;
- }
表单域太少，所以也许你看不到这个的优点何在，但是一旦不能为空的表单数量很多，优势就明显了！
标签：jquery, js
订阅
前4排已经被占据了 快抢好位置哦
我也补充几句
this.value在JQuery里一般写作$(this).val()，也可以写作$(this).attr(’value’)
if(this.value.length < 1)则可以写作if($(this).val()==”)
传统的JS写法让我比较的纠结 所以习惯全用JQuery的写法
JQuery有一些非官方的form插件和Validation插件，写的很完备，含空值校验、长度校验、email和uri之类固定格式校验等等常用校验。需要的时候也可以直接取用。
呵呵，我比较喜欢写短一点嘛，精简代码，所写成this.value，插件我用得少，不想因为少量的应用而引入大量的js！alert做举例使用，一般的话我会用div高亮来提示呢！
那是 this.value.length应该还比$(this).val()快一点
另，alert很让人不爽…