[网页编程]-22 JavaScript 表单校验01 简单校验
1.需求:实现提交内容校验,空值提示错误(onsubmit)
使用form 中的onsubmit属性实现,主要是如果提交数据为空,不做参数传递
注意点:需要给onsubmit属性提供返回值才能完成判断
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//判断账号是否为空 判断value的值
function checkName(){
//获取input对象的值
var uname = document.getElementById("uname").value;
//获得span对象
var span = document.getElementById("uname_span")
if(uname==null || uname ==""){
span.innerText ="✖账号不能为空";
return false;
}else{
span.innerText="账号可以使用";
return true;
}
}
</script>
</head>
<body>
<form action="#" method="post" onsubmit="return checkName()" >
<p>
账户:<input type="text" name="username" id="uname" value="" onblur="checkName()"/>
<span id="uname_span"></span>
</p>
<p>
密码:<input type="password" name="pwd" id="" value="123" disabled="disabled" />
</p>
<p>
<input type="submit" value="提交"/>
</p>
</form>
</body>
</html>
1.需求:实现提交内容校验,空值提示错误(button按钮提交)
这种提交方式为手动提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//判断账号是否为空 判断value的值
function checkName(){
//获取input对象的值
var uname = document.getElementById("uname").value;
//获得span对象
var span = document.getElementById("uname_span")
if(uname==null || uname ==""){
span.innerText ="✖账号不能为空";
}else{
span.innerText="账号可以使用";
//手动提交数据
document.fom.submit();
}
}
</script>
</head>
<body>
<form action="#" method="post" name="fom" >
<p>
账户:<input type="text" name="username" id="uname" value="" onblur="checkName()"/>
<span id="uname_span"></span>
</p>
<p>
密码:<input type="password" name="pwd" id="" value="123" disabled="disabled" />
</p>
<p>
<input type="button" value="提交" onclick="checkName()"/>
</p>
</form>
</body>
</html>
<!--
控制表单的提交方式
第一种
onsubmit="return checkName()" form 标签中的属性
-->
网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
赞同 0
评论 0 条