=====================================js表单验证模板============================
下面是对于一个email的表单验证的基本模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css" >
.init{
border: 1px solid black;
font-weight: bold;
}
.right{
border: 1px solid green;
font-weight: bold;
}
.wrong{
border: 1px solid red;
font-weight: bold;
}
</style>
<title>这是一个表单验证的模板！！！</title>
</head>
<body> //通过对条件监测的结果，控制提交按钮的禁用状态也可以控制表单验证
<form id="myform" action="show.html" method="post" onsubmit="return validate()"> //这个onsubmit是对于整个form表单而言的，由button的submit类型触发
请输入email地址： //return表示接受处理函数的返回值，true就执行，false就不执行
<input type="text" id="email" name="email" class="init" onblur="validateEmail()">
<span id="msg"></span><br>
<button type="submit">提交验证</button>
</form>
<script type="text/javascript">
function validateEmail() { /*定义事件处理函数，合法性*/
var email=document.getElementById('email');
var msg=document.getElementById('msg');
if(/^\w+@\w+\.\w+$/.test(email.value)){ //利用正则表达式判断 根据判断结果执行相应样式以提示用户
email.className="right";
msg.innerHTML="格式正确";
msg.style.color="green";
return true; //return用来作为处理函数的返回值，是为了提供给onsumit执行的函数判断，是否可以提交
}else{
email.className="wrong";
msg.innerHTML="格式错误";
msg.style.color="red";
return false;
}
}
function validate() {
return validateEmail();
}
</script>
</body>
</html>
========================================、密码验证===================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css" >
.init{
border: 1px solid black;
font-weight: bold;
}
.right{
border: 1px solid green;
font-weight: bold;
}
.wrong{
border: 1px solid red;
font-weight: bold;
}
</style>
<title>这是一个表单验证的模板！！！</title>
</head>
<body>
输入密码：<input type="password" id="psd" name="psd" onblur="validateEmpty('psd')">
<span id="psdmsg"></span><br>
确认密码：<input type="password" id="conf" name="conf" onblur="validateconf('psd','conf')">
<span id="confmsg"></span><br>
<script type="text/javascript">
function validateEmpty(srcname) { /*定义事件处理函数，合法性*/
var psd=document.getElementById(srcname);
var msg=document.getElementById(srcname+'msg');
if(psd.value===""){
psd.className="wrong";
msg.innerHTML="密码不能为空";
msg.style.color="red";
return false;
}else{
psd.className="right";
msg.innerHTML="";
msg.style.color="green";
return true;
}
}
function validateconf(srcname,desname) {
var psd=document.getElementById(srcname);
var conf=document.getElementById(desname);
var msg=document.getElementById(desname+'msg');
if(conf.value===psd.value){
psd.className="right";
conf.className="right";
msg.innerHTML="输入内容一致"
msg.style.color="green";
return true;
}else{
psd.className="wrong";
conf.className="wrong";
msg.innerHTML="输入内容不一致"
msg.style.color="red";
return false;
}
}
function validate() {
return validateEmail();
}
</script>
</body>
</html>
================================================单选钮操作===================================================
特点：多个元素的id和name相同，先确定如何获取单选钮内容。
注意：在单选钮和复选框中，出现多个id和name名称相同的元素时，javascript会认为它属于一类对象数组；若此时只使用document.getElementById()
进行获取，那最终取得的是这些数组里的第一个元素；若想取得一组的全部对象，则可使用document.all()，其返回的是对象数组。若想判断某个选项被选
中，则只通过"checked"实现判断。checked是HTML元素里的定义的属性，所有的元素对象都可直接调用属性。
checked是HTML元素里的定义的属性，所有的元素对象都可直接调用属性。
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/bd3.css">
<title>单选钮操作：实现正确数据的显示</title>
<script type="text/javascript">
function showSex(){
var sex=document.all("sex");//多个元素对象里单选，同名，同的是name
if (sex[0].checked){ //只调用其中一个对象，实现数据正确显示
alert("性别是："+sex[0].value);
}
if (sex[1].checked){
alert("性别是："+sex[1].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>
================================================JavaScript与表单交互（复选框）========================================
全选功能的设计主要是操作复选框中checked属性的内容，若此内容为true则选中，否则为false不被选中。
用一个复选框的选中状态来决定其它复选框的选中状态。
<head>
<meta charset="UTF-8">
<title>复选框选择</title>
<script type="text/javascript">
function showInst(){
var sex=document.all("inst");//多个元素对象里单选
var str="xx的兴趣：";
for (var x=0;x<inst.length;x++){
if (inst[x].checked){
str+=inst[x].value+"、";
}
}
alert(str);
}
function selectAll(){ //全选操作功能
var sex=document.all("inst");
for (var x=0;x<inst.length;x++){
inst[x].checked=document.getElementById("sela").checked; //这个保证了inst[x].checked不管全选框什么状态都能保持一致
}
}
</script>
</head>
<body>
请选择xx的兴趣：<br/>
<input type="checkbox" value="拍照" name="inst" id="inst" checked>自拍<br/>
<input type="checkbox" value="画画" name="inst" id="inst">画画<br/>
<input type="checkbox" value="电影" name="inst" id="inst">电影<br/>
<input type="checkbox" value="逛街" name="inst" id="inst">逛街<br/>
<input type="checkbox" value="旅游" name="inst" id="inst">旅游<br/><br/><br/>
<input type="checkbox" id="sela" name="sela" onclick="selectAll()">全选
<button onclick="showInst()">显示兴趣</button>
</body>
==============================================JavaScript与表单交互（下拉列表框）=======================================================
常用事件有onchange事件，表示下拉内容发生改变；可传递当前元素对象的内容，也可按照传统方式取得。
有两种方法可以实现，首先写传统的方法：
<head>
<meta charset="UTF-8">
<title>下拉列表框</title>
<script type="text/javascript">
function showCity(city){
alert("家乡是："+city);
}
</script>
</head>
<body>
你的家乡：
<select name="city" id="city" onchange="showCity()">
<option value="北京-BJ">北京</option>
<option value="上海-SH">上海</option>
<option value="福州-FZ">福州</option>
</select><br/>
</body>
第二种是传递当前元素内容的方法
<head>
<meta charset="UTF-8">
<title>下拉列表框</title>
<script type="text/javascript">
function showCity(){ //返回的是当前已被选中的内容
alert("家乡是："+document.getElementById("city").value);
}
</script>
</head>
<body>
你的家乡：
<select name="city" id="city" onchange="showCity(this.value)">
<option value="北京-BJ">北京</option>
<option value="上海-SH">上海</option>
<option value="福州-FZ">福州</option>
</select><br/>
</body>
=======================================JavaScript与表单交互（文本域）================================
写文本域里面的内容不要随意换行，因为就算是空格也会被认为是文本域里面的内容。
进行大文本信息的输入操作使用的，也可在文本域上使用一系列操作事件。
disabled禁用
<head>
<meta charset="UTF-8">
<title>文本域</title>
<script type="text/javascript">
function validateNote(){
var note=document.getElementById("note");
//以下两句为 边输入内容边取得输入内容的长度
var msg=document.getElementById("noteMsg");
// msg.innerHTML="输入数据长度："+note.value.length;//输入内容字数不限
//设定输入内容长度为10，边输边取
var len=note.value.length;//取得输入长度
if(len<=10){
msg.innerHTML="还可以输入"+(10-len)+"个长度的数据";
document.getElementById("sub").disabled=false;//通过对条件监测的结果，控制提交按钮的禁用状态
}else {
msg.innerHTML="<font color='#ff0000'>输入的数据内容过大！</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" onkeypress="validateNote()" onkeydown="validateNote()">hello</textarea><br/>
<span id="noteMsg"></span><br/>
<button type="submit" name="sub" id="sub">保存</button>
</form>
</body>
