output元素的追加和表单的验证

最新推荐文章于 2021-06-15 18:44:32 发布

会飞的蜗牛haha

最新推荐文章于 2021-06-15 18:44:32 发布

阅读量547

点赞数

分类专栏： HTML 文章标签：表单验证 required属性 patterns属性 step属性

本文链接：https://blog.csdn.net/ziy10231207/article/details/51885666

版权

HTML 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

到目前为止，还没有可以针对新元素的局部区域进行修改的样式

output元素的追加

output元素定义不同类型的输出，比如计算结果或者脚本的输出，output元素必须从属于某个表单，也就是说，必须将他书写在表单的内部，或者对他添加form属性

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>output元素的示例</title>
</head>
<form id="testform">
请选择一个数值：
<input type="range" name="range1" min=0 max=100 step=5/>
<output onforminput="value"=range1.value>50</output>
	
</form>

点击打开链接

在这个例子中，元素被绑定到一个range元素上，当拖动range元素的滑竿时，output元素的父表单会接受到消息，同时通知Output元素 ,将他的被绑定元素range的值显示出来

表单验证

自动验证

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>表单验证示例</title>
</head>
<body>
	<form method="get">
	 <input type="text" name="text" required pattern="^\w.*$">
	 <input type="submit">
	</form>
</body>

点击打开链接

1.required属性

可以应用在大多数元素上（除了隐藏元素，图片元素，按钮上)再提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户这个

元素中必须输入内容

2.pattern属性

对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式，当输入的内容不符合格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式

<input pattern="[0-9][A-Z]{3}" name=part  placeholder="输入内容：一个数字与三个大写字母">//palceholder属性提供一种提示，描述输入域所期待的值

3.min属性和max属性

这两个属性是数值类型和日期类型的input元素专用属性，他们限制了在input元素中输入的数值和日期的范围

4.step属性

step属性控制input元素中的值增加或减少的步幅，例如你想让用户输入的值在0到100之间，但必须是5的背书时，可以指定step为5

显式验证

HTML5中，form元素和input元素（包括select元素和textarea元素）都具有一个checkaValidity方法，调用这个方法，可以显式的对表单内所有元素内容和单个元素内容

进行有效性验证，它以boolean值得形式返回验证结果

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>checkValidity示例</title>
	<script language="javascript">
		function check()
		{
			var email=document.getElementById("email");
			if(email.value=="")
			{
				alert(:请输入email地址)；
				return false；
			}
			else if(!emal.checkValidity())
				alert("请输入正确的email地址")；
			else
				alert("你输入的email地址有效")；
		}
	</script>
	<form id=testform οnsubmit="return check();">
	<label for=email>email</label>
	<input type="email" name="email" id="email"/><br/>
	<input type="submit" >
	</form>
</head>

点击打开链接

取消验证

有两种方法取消表单验证

利用form元素的novalidate属性

这个方法可以关闭整个表单，当整个表单的第二部分需要验证的额内容比较多的时候，但又想先提交表单的第一部分，可以使用这种方法，先把该属性的值设置为true

关闭表单验证，提交第一部分内容，然后再把它设置为false,打开表单验证，提交第二部分的内容

利用input元素或者submit元素的formnovalidate属性

利用input元素的formnovalidate属性可以让表单验证对单个input元素失效

会飞的蜗牛haha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
output元素的追加和表单的验证

到目前为止，还没有可以针对新元素的局部区域进行修改的样式output元素的追加output元素定义不同类型的输出，比如计算结果或者脚本的输出，output元素必须从属于某个表单，也就是说，必须将他书写在表单的内部，或者对他添加form属性 output元素的示例请选择一个数值：50 点击打开链接在这个例子中，元素被绑定到一个range元素上，当拖动range元
复制链接

扫一扫