javascript扩展web表单

最新推荐文章于 2025-08-19 08:41:01 发布

原创最新推荐文章于 2025-08-19 08:41:01 发布 · 468 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #扩展 #web #validation #jquery #date

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍使用jQuery简化表单操作的方法，包括选择器、获取和设置表单元素的值、事件绑定及表单验证等。特别推荐使用jQuery Validation插件进行高效且灵活的表单验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说到表单就不得不说各种表单字段,javascript很多时候是用来验证我们提交的表单数据的,那么我们如何获得表单中各个字段的数据呢??!!

传统的有DOM方式的getElementById()和getElementsByName(),但是他们想要获得更加精确的字段(如 password类型的<input>)就要先遍历检验字段type属性,太麻烦了!!!

还好jquery提供了各种选择器,并且使用.each()遍历方便多了!!!

1.选择器展示

$(':input')所有表单元素

$(':text')

$(':password')

$(':radio')

$(':checkbox')

$(':submit')

$(':image')

$(':reset')

$(':button')

$(':file')

$(':hidden')

有两个非常好用

$(':checked')选中标记或打开所有字段..单选复选

$(':selected')选择一个列表或菜单中的选中选项

2.获取表单元素后少不了获取和设置表单元素的值!!!!当然可以用.attr('属性名'),但是.val()/val('setvalue')更方便,还可以设置属性

3.还可以设置事件噢!!!.submit(function(){......}),focus,blur,click,change

另外所谓的表单智能,只是需要的时候显示或一定条件才能用,如.attr('disabled',true)//设置为可用,.show().hide()//显示隐藏

4.表单验证,这里介绍一个jquery验证插件Validation(http://bassistance.de/jquery-plug-ins/jquery-plug-in-validation/),只需要调用.validate()就能验证

如果需要复杂的验证

4-1添加验证规则

添加一个class属性class="required date url E-mail number digits creditcard",其中date格式为MM/DD/YYYY

4-2添加信息误错

添加一个title="XXXXXXXXXXXXXXXXX"

4-3高级验证

~~验证规则:

$('#idOfForm').validate({

rules:{

name:'required',

birthday:'date',

e-mail:{required:true,E-mail:true}}

});

还有minlength,maxlength,rangelength(rangelength:[n:m]),min,max,range(range:[nm]),equalTo(一个字段内容匹配另外一个equalTo:'#password'),更多请看官网

~~信息误错:

messages:{

password:{

required:"XXXXXXXXXXXXXXXXXX",

confirm_password:{equalTo:'#password'}

}

~~样式化错误信息:

当validation插件检查一个表单并找到一个无效表单字段,它会1.给表单字段增加一个error类,2.它添加包含了错误信息的一个<label>标签

定义error信息放置的位置:ep:

errorPlacement:function(error,element){

if(element.is(":radio")||element.is(":checkbox")){

error.appendTo(element.parent());

}else{

error.insertAfter(element);

}

可以给错误添加个样式:

#signup label.error {
	font-size: 0.8em;
	color: #F00;
  font-weight: bold;
	display: block;
  margin-left: 150px;
}
#signup  input.error, #signup select.error  {
	background: #FFA9B8;
  border: 1px solid red;
}