一、数据规范性检查
1、应用场合:在判断输入的数据是否符合格式要求、数据的范围、符号什么的
会涉及到正则表达,来验证输入数据的格式
2、例子:验证邮件格式是否符合要求
- html部分:
验证在onblur时开始,onblur是文本框失去焦点的意思,具体的操作就是输完数据后,点击浏览器其他空白处;获得焦点是onfocus。
在form元素上使用onsubmit事件,针对表单进行拦截,返回true才能提交
<body>
<form id="myForm" onsubmit="return validate()">
请输入email地址:<input type="text" name="email" id="email" value="" onblur="return validate()">
<span id="msg"></span>
<div><button type="submit">显示邮件</button></div>
</form>
</body>
- script部分:
正则表达式的规范——一定要有开始与结束:/^正则$/.test(要验证的数据)
<script>
function showEmail() {
var showE = document.getElementById("email");
var msgE=document.getElementById("msg");
if (/^\w+@\w+\.\w+$/.test(showE.value)) {
// alert("email格式正确" + showE.value);
msgE.innerHTML="<font color='aqua'>email输入正确!</font>";
return true;
} else {
// alert("email格式错误" + showE.value);
msgE.innerHTML="<font color='red'>email输入错误!</font>";
return false;
}
}
function validate(){
return showEmail();
}
</script>
二、密码验证
1、思路:前端大概是这样,我们都很熟悉的套路:
第一次输入密码时,只检查输入是否为空,为空则发出错误提示
第二次输入密码时,检查是否为空,不为空时,检查与第一次输入的密码是否是一致
2、html部分:
<head>
<meta charset="UTF-8">
<title>密码验证</title>
<script type="text/javascript" src="Js/pwdValidateJs.js"></script>
</head>
<body>
输入密码:<input type="password" name="pwd" id="pwd"><span id="pwdMsg" ></span><br>
确认密码:<input type="password" name="config" id="config"><span id="configMsg"></span>
</body>
2、js部分:判断是否为空部分的代码值得日后在其他地方使用。
window.onload=function () {
var pwdElement=document.getElementById("pwd");
var configElemrnt=document.getElementById("config");
pwdElement.addEventListener("blur",validatePwd, false);
configElemrnt.addEventListener("blur",validateConfig,false);
}
function validatePwd(){
return validateEmpty("pwd");
}
function validateConfig(){
if (validateEmpty("config")){
return validateRepeat("pwd","config");
}
return false;
}
function validateEmpty( elementname ) {
var objElement=document.getElementById(elementname);
var msgElement=document.getElementById(elementname+"Msg");
var str = objElement.value.replace(/(^\s*)|(\s*$)/g, '');
if (str == '' || str == undefined || str == null){
msgElement.innerHTML="<font color='#dc143c'>输入内容无效!</font>";
return false;
}else{
msgElement.innerHTML="<font color='#006400'>输入内容有效!</font>";
return true;
}
}
function validateRepeat(srcName, desName) {
var srcElement=document.getElementById(srcName);
var desElement=document.getElementById(desName);
var desMsgElement=document.getElementById(desName+"Msg");
if (srcElement.value==desElement.value) {
desMsgElement.innerHTML="<font color='#006400'>输入一致!</font>";
return true;
}else{
desMsgElement.innerHTML="<font color='#dc143c'>两次输入不一致!</font>";
return false;
}
}
三、单选钮 radio
1、特点:多个radio的id都一样!!且同一标签元素的id 和name必须一样! 就像java中的对象数组
2、例子:选择性别,并显示出来
document.all("sex")将这样一组的标签元素都取出,然后用for循环对其中的各个元素的value进行判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.3 单选钮操作</title>
<script>
function showSex(){
// var sex=document.getElementById("sex");
// alert("性别是:"+sex.value);
var sex=document.all("sex")
for (i=0;i<sex.length;i++){
if (sex[i].checked==true){
alert("被选中的是:"+sex[i].value)
}
}
}
</script>
</head>
<body>
请选择性别:<input type="radio" name="sex" id="sex" value="男" checked>男 <!--设置一个默认值-->
<input type="radio" name="sex" id="sex" value="女" >女<br>
<button onclick="showSex()">显示性别</button>
</body>
</html>
四、复选框 checkbox
1、特点:多个checkbox的id都一样!!且同一标签元素的id 和name必须一样!
document.all("id")取出这一组的值
2、全选的实现,改变element.checked
3、例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.4 复选框操作</title>
<script>
function showInst(){
// var sex=document.getElementById("sex");
// alert("性别是:"+sex.value);
var fruit=document.all("fruit")
var show="你选择的水果是:";
for (i=0;i<fruit.length;i++){
if (fruit[i].checked){
show+=fruit[i].value+"、";
}
}
alert(show);
}
function selectAll() {
var seleElement=document.getElementById("selAll");
var fruit=document.all("fruit");
for (i=0;i<fruit.length;i++){
fruit[i].checked=seleElement.checked;
}
}
</script>
</head>
<body>
请选择你喜欢的水果:<br>
<input type="checkbox" value="苹果" name="fruit" id="fruit" >苹果<br>
<input type="checkbox" value="香蕉" name="fruit" id="fruit" >香蕉<br>
<input type="checkbox" value="橙子" name="fruit" id="fruit" >橙子<br>
<input type="checkbox" value="菠萝" name="fruit" id="fruit" >菠萝<br>
<input type="checkbox" value="葡萄" name="fruit" id="fruit" >葡萄<br>
<br><br><br>
<input type="checkbox" value="全选" name="selAll" id="selAll" onclick="selectAll()">全选
<button onclick="showInst()">显示选择的水果</button>
</body>
</html>
五、下拉列表框<select>
有两种方式来实现:
方式一:this.value的方式直接向处理函数传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.5 下拉列表框(方式1)</title>
<script>
function showCity(city){
alert("你的家乡是:"+city);
}
</script>
</head>
<body>
你的家乡:<select name="city" id="city" onchange="showCity(this.value)">
<option value="北京-BJ">北京</option>
<option value="上海-SH">上海</option>
<option value="杭州-HZ">杭州</option>
</select>
</body>
</html>
方式二:getElementById的方式-推荐这种,比较习惯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.5 下拉列表框(方式2)</title>
<script>
function showCity(){
var cityElement=document.getElementById("city")
alert("你的家乡是:"+cityElement.value);
}
</script>
</head>
<body>
你的家乡:<select name="city" id="city" onchange="showCity()">
<option value="北京-BJ">北京</option>
<option value="上海-SH">上海</option>
<option value="杭州-HZ">杭州</option>
</select>
</body>
</html>
六、文本域输入<textarea>
1、在输入的同时检查文字的数目是否超过上限
2、例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.6 文本域</title>
<script>
function validateNote(){
var noteElement=document.getElementById("note");
var msgElement=document.getElementById("noteMsg");
// msgElement.innerHTML="输入数据长度:"+noteElement.value.length;
if (noteElement.value.length<15) {
msgElement.innerHTML="<font color='green'>还可以输入"+(15-noteElement.value.length)+"</font>";
document.getElementById("sub").disabled=false;
}
else{
msgElement.innerHTML="<font color='red'>输入文字数目超过上限!</font>";
document.getElementById("sub").disabled=true;
}
}
</script>
</head>
<body>
<form action="show.html" method="post">
描述:<br>
<textarea id="note" name="note" cols="50" rows="10" onkeydown="validateNote()">请在此输入...</textarea>
<br>
<span id="noteMsg"></span><br>
<button type="submit" id="sub" name="sub">保存</button>
</form>