视频: 66 JS验证 2024
您可以使用JavaScript对各种输入类型进行som基本验证。这个第一个练习设置了Web表单的HTML。完成此练习后,您将为表单完成JavaScript验证。打开你的文本编辑器并创建一个新的空文件。
-
在该文件中,放置以下HTML:
-
表单用户信息
名称:*名称是必需的 城市:
州:阿拉巴马州加州科罗拉多州佛罗里达州伊利诺斯州新泽西州纽约州威斯康星州 >邮编:
电子邮件地址:*需要电子邮件
电话号码:格式:xxx-xxx-xxxx
数字类型:工作首页请选择一个选项
密码:*需要密码
验证密码:*密码不匹配
将文件另存为表格。 PHP在你的文档根。
<! --1 - >
-
本地主机
/形式。 PHP。 - HTML看起来很糟糕,表单字段和错误显示不一致。你可以用CSS来解决这个问题。在您的编辑器中创建一个新的文本文件,然后输入下面的CSS: form fieldset {display:inline-block;}。 radioButton {float:none;显示:内联;保证金:0 1em; width:2em;} form label {width:8em; margin-right:1em;向左飘浮; text-align:right; display:block;} form input {width:15em;} #submit {margin-top:2em; float:right;}。 errorClass {background-color:#CC6666;} #errorDiv {col or:red;}。 errorFeedback {visibility:hidden;}
将文件另存为表单。在您的文档根目录中的CSS。
-
这个文件已经在步骤2中创建的HTML中引用,所以不需要对该文件进行其他更改。
-
重新载入表单。 PHP文件在您的浏览器。
使用HTML和CSS,现在是添加一些JavaScript的时候了。注意:
-
本章稍后将构建验证代码。现在,您只需添加一个基本的JavaScript文件。
-
将文件另存为表单。 js在你的文档根目录下。
-
重新载入表格。 PHP在你的网页浏览器。
单击确定关闭对话框。虽然警告对话框本身并不新鲜,但它证明了您已经正确连接了HTML和JavaScript。从这里开始,您可以在表单中添加JavaScript验证。在此之前,您可能会发现分解您创建的一些HTML和CSS是有帮助的。