<!--
表单校验-涉及的事件和信息提示方式
用户注册信息,提交到服务端之前需要对用户填写的信息进行校验,如果用户写的对,
就提交给服务端,否则不提交并出现提示信息。在客户端进行校验。
-->
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//校验用户名
function checkUser(){
//alert("haha");
var oUserNode = document.getElementsByName("user")[0];
//alert(oUserNode.value);
var name = oUserNode.value;
var oSpanNode = document.getElementById("userspan");
if(name == "abc"){
oSpanNode.innerHTML = "用户名正确".fontcolor("blue");//这里也可以传入“√”图片,即oSpanNode.innerHTML = "<img src='ok.jpg'/>"
}else{
oSpanNode.innerHTML = "用户名错误".fontcolor("red");
}
}
</script>
<form>
<!--
一般是当用户输入完名称,然后在输入密码时候开始校验名称信息,那么用什么事件校验?
思路:
光标定位在“用户名称”中不校验名称,光标离开“用户名称”或光标定位在“输入密码”中开始校验名称,
所以用到onblur事件。
(这个onblur是失去焦点事件,而onfocus正好相反,是获取焦点事件)
-->
用户名称:<input type="text" name="user" οnblur="checkUser()"/>
<span id="userspan"></span> <!-- 这里用span显示校验结果信息,不要用div,因为div后面自带换行 -->
<br/>
输入密码:<input type="text" name="psw" /><br/>
</form>
</body>
</html>
DOM(三)-07-(示例-表单校验-涉及的事件和信息提示方式)
最新推荐文章于 2020-10-09 21:47:43 发布