本帖最后由 小石姐姐 于 2018-5-4 09:43 编辑
HTML的表单标签及校验 1.HTML的表单标签:<form>
* 常用属性:
* action属性:提交的路径.默认提交到当前页面
* method属性:请求的方式.GET和POST.默认是GET.
***** GET方式和POST方式的区别?
* GET :数据会显示到地址栏中.GET方式提交是有大小的限制.
* POST :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
*有很多提交方式,只是get和post比较常用
2.HTML中表单元素:
* <input type=”text”> :文本框.
* 常用属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :文本框的默认值.
* size :文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
*disable : 废弃,定义该属性后,表单变灰
* <input type=”password”> :密码框.
* 常用属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :密码框的默认值.
* size :密码框的长度.
* maxlength:密码框输入的最大长度.
* <input type=”radio”> :单选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :单选按钮的默认值.(必须定义值)
* checked:单选按钮默认被选中.
* <input type=”checkbox”> :复选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :单选按钮的默认值.(必须定义值)
* checked:单选按钮默认被选中.
* <input type=”button”> :普通按钮.没有任何功能的按钮.
* <input type=”submit”> :提交按钮.
* <input type=”reset”> :重置按钮.
* <input type=”file”> :文件上传的表单项.
* <input type=”hidden”> :隐藏字段.
* <input type=”image”> :图片按钮
* <select> :下拉列表.
* <textarea> :文本域.
下拉列表
<select name="province">
<option>--请选择--</option>
<option value="北京" selected>北京</option> :必需要有值value,实际选中的是value值,在页面中开到的值只是用来展示的
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
* 文本域:
<textarea cols="20" rows="4" name="info">我是:</textarea>
3.表单的校验
3.1提交校验:
3.1.1 JavaScript 的表单校验方法
在form标签中添加提交事件,出发的函数返回true时提交,false阻止提交
<form action="想跳转到的网页.html" method="post">
3.1.2 JQuery 的表单校验方法
1.给form标签动态绑定提交事件
2.使用JQuery事件中的 trigger(type,[data]) 事件,再次触发表单校验事件
对校验结果进行判断,如果输入不符合要求,该提交事件触发的函数返回一个false组织提交,
否则不返回值,提交成功.
trigger(type,[data]) 事件:
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发
一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。
$("form").submit(function(){
$("form input[class='required']").trigger("blur");
//获取错误信息
var errorLength = $(".onError").length;
if(errorLength > 0){
return false;
}
});
3.2数据校验
绑定一个失去焦点事件(blur),然后可以再链接其它的事件(比如键盘抬起,获取焦点),
这些链接的事件使用triggerHandler事件触发blur事件的函数,就可以实现校验.
$("form input").blur(function(){
//获得该元素的父元素
var $parent = $(this).parent();
//将原有的信息清楚掉
$parent.find(".formtips").remove();
//确定输入项
//如果是用户名
if($(this).is("#userName")){
//判断用户名是否为空
if(this.value == ""){
//添加错误提示
$parent.append("<font class='formtips onError'>用户名不能为空</font>");
}else{
//添加正确信息
$parent.append("<font class='formtips onSuccess'>输入正确</font>");
}
}
//如果是密码框
if($(this).is("#password")){
if(this.value == ""){
$parent.append("<font class='formtips onError'>密码不能为空</font>");
}else{
$parent.append("<font class='formtips onSuccess'>输入正确</font>");
}
}
}).keyup(function(){
//绑定键盘抬起事件
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
4.HTML5扩展的表单标签:
<input type=”email”> :输入的数据要符合邮箱的格式
<input type=”date”> :日期选择
<input type=”number”> :只能输入数字
<input type=”color”> :产生一个颜色块;
|
|