应用JavaScript脚本验证表单元素是否为空

释放双眼,带上耳机,听听看~!

在程序开发过程中,经常要应用JavaScript脚本来判断表单提交的数据是否为空,或者判断提交的数据是否符合标准等。
本例主要通过if语句和form对象的相关属性验证表单元素是否为空。具体开发步骤如下:
(1)设计表单页,添加一个表格并设置表格的背景图片路径为images/bg.jpg,添加一个用户名文本框并命名为user,添加一个密码域并命名为pwd,代码如下:

<form name="myform"method="post"action="">
<table width="532"height="183"align="center"cellpadding="0"cellspacing="0"bgcolor="#CCFF66"background=
"images/bg.jpg">
<tr><td height="71"colspan="2"align="center">&nbsp;</td></tr>
<tr>
<td width="281"align="left">
用户名:<input name="user"type="text'"id="user"size="20"> <br><br>
密&nbsp:&nbsp;码:<input name="pwd"type="password"id="pwd”size="20>
</td></tr>
<tr>
<td height="43"align="center">
<input type="submit"name="submit"onClick="return mycheck();"value="登录">&nbsp;
<input type="reset"name="Submit2"value="重置">
</td></tr>
</table>
</form>

(2)在上面的代码中,在“登录”按钮的表单元素中添加了一个onclick鼠标单击事件,调用自定义函数mycheck(),代码如下:
<input type=”submit”name=”submit”onClick=”return mycheck();”value=”登录”>
(3)在<form>表单元素外应用function定义一个函数mycheck),用来验证表单元素是否为空。
在mycheck)函数中,应用if条件语句判断表单提交的用户名和密码是否为空,如果为空,则弹出提示信息,自定义函数如下:

<script language="javascript">
function mycheck(X//定义一个函数
if(myform.user.value=="){/通过f语句判断用户名是否为空alert(“用户名称不能为空!!");myform.user.focus();return false;//返回表单元素位置ift(myform.pwd.value==""{/通过f语句判断密码是否为空alert(“用户密码不能为空!!");myform.pwd.focus();return false;/返回表单元素位置
</script>

本例中介绍的只是通过JavaScript脚本验证表单元素是否为空,还可以通过JavaScript脚本验证表单元素值的格式是否正确,例如验证电话号码的格式,邮箱地址的格式等

人已赞赏
技术经验

应用noscript标记验证浏览器是否支持JavaScript脚本

2019-7-18 19:44:18

技术经验

cookie是什么,带你了解cookie

2019-7-18 19:56:24

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索