100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html表单验证元素必填 JavaScript 表单验证

html表单验证元素必填 JavaScript 表单验证

时间:2019-02-19 06:45:48

相关推荐

html表单验证元素必填 JavaScript 表单验证

JavaScript 表单验证

HTML表单验证可以通过JavaScript完成。

HTML表单通常用于收集用户信息,例如姓名,电子邮件地址,位置,年龄等。

但是很可能某些用户可能不会输入您期望的数据。

为了避免对服务器资源造成不必要的压力,您可以使用JavaScript在客户端(用户系统)上验证表单数据。

在将输入发送到Web服务器之前,由Web浏览器执行客户端验证。

输入已发送到服务器后,服务器端验证由Web服务器执行。

示例

Createanaccount

姓名

Email

Password

注册

已经有一个帐户?登录

functionvalidateForm(){

letname=document.getElementById("username").value;

letemail=document.getElementById("useremail").value;

letpswd1=document.getElementById("userpwd1").value;

letpswd2=document.getElementById("userpwd2").value;

if(name==""){

alert("Namemustbefilledout");

returnfalse;

}

if(email==""){

alert("必须填写电子邮件");

returnfalse;

}

if(pswd1!==""||pswd2!==""){

if(pswd1!==pswd2){

alert("Passworddidn'tmatch");

returnfalse;

}

}else{

alert("密码必须填写");

returnfalse;

}

returntrue;

}

测试看看 ‹/›

典型的验证任务是:用户是否填写了所有必填字段?

用户输入了有效数据吗?

在此代码中,如果输入字段(用户名)为空,此函数将警告消息并返回false,以防止提交表单:

JavaScript示例:functionvalidateForm(){

letx=document.getElementById("uname").value;

if(x==""){

alert("名称必须填写");

returnfalse;

}

}

提交表单时可以调用该函数:

HTML表单示例:

示例

Name:

测试看看‹/›

验证数字输入

JavaScript通常用于验证数字输入。

请输入1到10之间的数字:

验证电子邮件输入

JavaScript通常用于验证电子邮件地址。

请输入有效的电子邮件地址:

验证密码确认

JavaScript通常用于匹配密码确认。

自动HTML表单验证

HTML表单验证可以使用必填属性自动执行:

示例测试看看‹/›

变更输入类型

您可以使用javascript 在和之间进行切换。

在密码字段中输入一个值,然后单击“显示密码”按钮:

隐藏密码

HTML输入验证属性

HTML5引入了以下新的HTML属性:属性描述指定应禁用输入元素

指定输入元素的最大值

指定输入元素的最小值

指定输入元素的值模式

指定输入字段需要一个元素

CSS验证伪选择器

CSS3引入了以下新的CSS伪选择器:选择器描述选择指定了“禁用”属性的输入元素

选择具有无效值的输入元素

选择具有有效值的输入元素

选择未指定“必需”属性的输入元素

选择指定了“必需”属性的输入元素

注意:客户端验证不能代替或代替服务器端验证。即使用户已经验证了表单数据,也应始终在服务器端验证表单数据,因为用户可以在其浏览器中禁用JavaScript。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。