表单验证（以下为JS代码复制放到body中即可）
<form action="https://www.baidu.com" onsubmit="return checkForm()">
用户名: <input type="text" name="username" onblur="checkUsername()"> <span id="usernameSpan"></span> <br>
密码: <input type="password" name="pwd1" onblur="checkPwd1()"> <span id="pwd1Span"></span> <br>
确认密码: <input type="password" name="pwd2" onblur="checkPwd2()"> <span id="pwd2Span"></span> <br>
<input type="submit">
</form>
<script type="text/javascript">
function checkForm(){
//进行数据校验，有任何一个不满足要求，就不能提交数据
var r1 = checkUsername();//检验用户名
var r2 = checkPwd1();//校验密码
var r3 = checkPwd2();//校验确认密码
return r1 && r2 && r3;
}
function checkUsername(){
//校验用户名不为空
//1 获取用户名的dom对象
var usernameDom = document.querySelector("input[name='username']");
//2 访问属性
//3 输出结果(操作span的内部内容)
var spanDom = document.querySelector("#usernameSpan");
if(usernameDom.value.trim().length <= 0){
spanDom.innerHTML="用户名不能为空";
return false;//为空 return false
}else{
spanDom.innerHTML="";
return true;//有值 return true
}
}
function checkPwd1(){
//校验密码不能为空
//1 获取密码的dom对象
var pwd1Dom = document.querySelector("input[name='pwd1']");
//2 访问属性
//3 输出结果（操作span的内部内容）
var spanDom = document.querySelector("#pwd1Span");
if(pwd1Dom.value.trim().length <= 0){
spanDom.innerHTML = "密码不能为空";
return false;
}else{
spanDom.innerHTML = "";
return true;
}
}
function checkPwd2(){
//校验确认密码不为空
//1 获取确认密码的dom对象
var pwd2Dom = document.querySelector("input[name='pwd2']");
//2 访问属性
//3 输出结果（操作span的内部内容）
var spanDom = document.querySelector("#pwd2Span");
if(pwd2Dom.value.trim().length <= 0){
spanDom.innerHTML = "确认密码不能为空";
return false;
}else{
//确认密码不为空， 此时进行2次密码内容校验
var pwd1Dom = document.querySelector("input[name='pwd1']");
if(pwd1Dom.value != pwd2Dom.value){
spanDom.innerHTML="两次密码不一致";
return false;
}else{
spanDom.innerHTML="";
return true;
}
}
}
</script>
<form action="https://www.baidu.com" >
用户名: <input type="text" name="username" onblur="checkUsername()"> <span id="usernameSpan"></span> <br>
密码: <input type="password" name="pwd1" onblur="checkPwd1()"> <span id="pwd1Span"></span> <br>
确认密码: <input type="password" name="pwd2" onblur="checkPwd2()"> <span id="pwd2Span"></span> <br>
<input type="button" value="提交" onclick="checkForm()">
</form>
<script type="text/javascript">
function checkForm(){
//进行数据校验，有任何一个不满足要求，就不能提交数据
var r1 = checkUsername();//检验用户名
var r2 = checkPwd1();//校验密码
var r3 = checkPwd2();//校验确认密码
if(r1 && r2 && r3){
document.querySelector("form").submit();
}
}
function checkUsername(){
//校验用户名不为空
//1 获取用户名的dom对象
var usernameDom = document.querySelector("input[name='username']");
//2 访问属性
//3 输出结果(操作span的内部内容)
var spanDom = document.querySelector("#usernameSpan");
if(usernameDom.value.trim().length <= 0){
spanDom.innerHTML="用户名不能为空";
return false;//为空 return false
}else{
spanDom.innerHTML="";
return true;//有值 return true
}
}
function checkPwd1(){
//校验密码不能为空
//1 获取密码的dom对象
var pwd1Dom = document.querySelector("input[name='pwd1']");
//2 访问属性
//3 输出结果（操作span的内部内容）
var spanDom = document.querySelector("#pwd1Span");
if(pwd1Dom.value.trim().length <= 0){
spanDom.innerHTML = "密码不能为空";
return false;
}else{
spanDom.innerHTML = "";
return true;
}
}
function checkPwd2(){
//校验确认密码不为空
//1 获取确认密码的dom对象
var pwd2Dom = document.querySelector("input[name='pwd2']");
//2 访问属性
//3 输出结果（操作span的内部内容）
var spanDom = document.querySelector("#pwd2Span");
if(pwd2Dom.value.trim().length <= 0){
spanDom.innerHTML = "确认密码不能为空";
return false;
}else{
//确认密码不为空， 此时进行2次密码内容校验
var pwd1Dom = document.querySelector("input[name='pwd1']");
if(pwd1Dom.value != pwd2Dom.value){
spanDom.innerHTML="两次密码不一致";
return false;
}else{
spanDom.innerHTML="";
return true;
}
}
}
</script>
级联下拉列表
<select name="" id="province" onchange="handleChange()">
<option value="0">河南</option>
<option value="1">河北</option>
<option value="2">山东</option>
<option value="3">山西</option>
</select>
<select name="" id="city">
<option value="0">郑州</option>
<option value="1">洛阳</option>
<option value="2">南阳</option>
<option value="3">安阳</option>
</select>
<script type="text/javascript">
function handleChange(){
//根据province的value，动态的修改city下拉列表的内容
//1 获取province的value
var provinceDom = document.querySelector("#province");
//2 根据省份修改城市
/*provinceDom.value city
0 <option value="0">郑州</option>
<option value="1">洛阳</option>
<option value="2">南阳</option>
<option value="3">安阳</option>
1 <option value="0">石家庄</option>
<option value="1">保定</option>
<option value="2">承德</option>
<option value="3">邯郸</option>
...
*/
var cityDom = document.querySelector("#city");
switch(provinceDom.value){
case '0': cityDom.innerHTML='<option value="0">郑州</option><option value="1">洛阳</option><option value="2">南阳</option><option value="3">安阳</option>';break;
case '1': cityDom.innerHTML = '<option value="0">石家庄</option><option value="1">保定</option><option value="2">承德</option><option value="3">邯郸</option>';break;
case '2': cityDom.innerHTML='<option value="0">济南</option><option value="1">青岛</option><option value="2">菏泽</option><option value="3">枣庄</option>';break;
case '3': cityDom.innerHTML='<option value="0">太原</option><option value="1">晋城</option><option value="2">吕梁</option><option value="3">长治</option>';break;
}
}
</script>
<select name="" id="province" onchange="handleChange()">
<option value="0">河南</option>
<option value="1">河北</option>
<option value="2">山东</option>
<option value="3">山西</option>
</select>
<select name="" id="city">
<option value="0">郑州</option>
<option value="1">洛阳</option>
<option value="2">南阳</option>
<option value="3">安阳</option>
</select>
<script type="text/javascript">
function handleChange(){
//根据province的value，动态的修改city下拉列表的内容
//1 获取province的value
var provinceDom = document.querySelector("#province");
//2 根据省份修改城市
var html = "";
var a0 = ["郑州","洛阳","南阳","安阳"];
for(var i = 0; i < a0.length; i++){
html+='<option value="'+i+'">'+a0[i]+'</option>';
}
console.log(html);
var html1="";
var a1 = ["石家庄","保定","承德","邯郸"];
for(var i = 0; i < a1.length; i++){
html1 +='<option value="'+i+'">'+a1[i]+'</option>';
}
console.log(html1);
var html2 = "";
var a2 = ["济南","青岛","菏泽","枣庄"];
for(var i = 0; i < a2.length; i++){
html2 += '<option value="'+i+'">'+a2[i]+'</option>';
}
console.log(html2);
var html3="";
var a3 = ["太原","晋城","吕梁","长治"];
for(var i = 0; i < a3.length; i++){
html3 += '<option value="'+i+'">'+a3[i]+'</option>';
}
console.log(html3);
var cityDom = document.querySelector("#city");
switch(provinceDom.value){
case '0': cityDom.innerHTML=html;break;
case '1': cityDom.innerHTML = html1;break;
case '2': cityDom.innerHTML=html2;break;
case '3': cityDom.innerHTML=html3;break;
}
}
</script>
<select name="" id="province" onchange="handleChange()">
<option value="0">河南</option>
<option value="1">河北</option>
<option value="2">山东</option>
<option value="3">山西</option>
</select>
<select name="" id="city">
<option value="0">郑州</option>
<option value="1">洛阳</option>
<option value="2">南阳</option>
<option value="3">安阳</option>
</select>
<script type="text/javascript">
var a0 = ["郑州","洛阳","南阳","安阳"];
var a1 = ["石家庄","保定","承德","邯郸"];
var a2 = ["济南","青岛","菏泽","枣庄"];
var a3 = ["太原","晋城","吕梁","长治"];
var a =[a0,a1,a2,a3];
function handleChange(){
//根据province的value，动态的修改city下拉列表的内容
//1 获取province的value
var provinceDom = document.querySelector("#province");
//2 根据省份修改城市
//a[provinceDom.value] //获取省份对应的城市数组；
var html ="";
for(var i = 0; i < a[provinceDom.value].length; i++){
html+='<option value="'+i+'">'+a[provinceDom.value][i]+'</option>';
}
console.log(html);
var cityDom = document.querySelector("#city");
cityDom.innerHTML = html;
}
</script>
858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
