javascript表单验证笔记

原创 PHP笔记  2017-04-06 18:46  阅读 1,915 views 次

html表单可以使用javascript脚本来验证,常用的验证有:是否已填写表单中的必填项目;输入的邮件地址是否合法;是否在数据域中输入了文本等等。

javascript脚本验证

1、表单必填项目验证

当要实现用户在文本框中必须输入内容才能提交,可以使用javascript脚本来验证。

实例

........
<body align="center">
<script type="text/javascript">
function verification(){
var user=document.forms["myform"]["user"].value;
if(user==""||user==null){
alert("用户名不能为空!");
return false;
}
alert("提交成功!");}
</script>
<br/>
/*表单中onsubmit事件中函数前加return的目的是:函数返回false时,不提交表单数据*/
<form action="#" name="myform" onsubmit="return verification()" method="get"/>
用户名:<input type="text" name="user" /><br/><br/>
<input type="submit" value="提交">
</form>
</body>
.....

运行结果:

2、表单邮件地址验证

在输入框中输入邮件地址,要保证邮件地址的正确格式,可以使用javascript脚本来进行验证。

实例:

........
<body align="center">
<script type="text/javascript">
function verification(){
var user=document.forms["myform"]["user"].value;
var patt=/^[0-9]{5,11}@qq.com/;/*正则表达式,必须是5到11位数字加@qq.com*/
var bool=patt.test(user);
if(!bool){
alert("QQ邮件不正确!");
return false;
}
}
</script>
<br/>
<form action="#" name="myform" onsubmit="return verification()" method="get"/>
QQ邮箱:<input type="text" name="user" /><br/><br/>
<input type="submit" value="提交">
</form>
</body>
.....

运行结果:

 

html表单自动验证

通过required属性,浏览器可以自动完成html表单字段的值为空的验证。当表单字段的值为空,required属性会阻止表单的提交。

实例:

.......
<body align="center">
<form action="#" name="myform" method="get"/>
邮件地址:<input type="text" name="user" required/><br/><br/>
<input type="submit" value="提交">
</form>
</body>
......

运行结果说明:当输入内容浏览器中的地址发生变化(即提交成功);如果不输入内容,浏览器中的地址不发生变化(即阻止提交)。

html约束验证

html5新增了“约束验证”html表单的验证方式。约束验证是表单在提交的时候浏览器自动实现验证的一种算法。html约束验证一般是基于:html输入属性、css伪类选择器\dom属性和方法。

表单数据约束验证html输入属性:

  • disabled:规定输入的元素不可用
  • max:规定输入元素的最大值
  • min:规定输入元素的最小值
  • pattern:规定输入元素值的模式
  • required:规定输入元素字段是必需的
  • type:规则输入元素的类型
    ......

更多见:html5表单新增属性大全

表单数据约束验证css伪类选择器

  • :disabled:选取属性为 "disabled" 属性的 input 元素
  • :invalid:选取无效的 input 元素
  • :optional:选择没有"required"属性的 input 元素
  • :required:选择有"required"属性的 input 元素
  • :valid:选取有效值的 input 元素
    ......

更多见:css伪类选择器大全

本文地址:https://www.ggbiji.com/js-form-validation.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情