当前位置：网站首页>表单验证和级联下拉列表（多种实现）
表单验证和级联下拉列表（多种实现）
2022-07-28 20:19:00 【Carry lsh】
表单验证（以下为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>边栏推荐
- Research on intangible cultural heritage image classification based on multimodal fusion
- 怎样巧用断言+异常处理类，使代码更简洁！（荣耀典藏版）
- Assign a string pointer to an array [easy to understand]
- Which brand is the best and most cost-effective open headset
- I have been in the industry for 4 years and changed jobs twice. I have understood the field of software testing~
- Information fusion method and application of expert opinion and trust in large group emergency decision-making based on complex network
- 04.toRef 默认值
- Matlab|基础知识总结一
- 什么是质因数，质因数（素因数或质因子）在数论里是指能整除给定正整数的质数
- PCB材料简单介绍
猜你喜欢
PCB材料简单介绍
节省70%的显存，训练速度提高2倍！浙大＆阿里提出在线卷积重新参数化OREPA，代码已开源！（CVPR 2022 ）
Implementation of sequence table
顺序表的实现
Research on intangible cultural heritage image classification based on multimodal fusion
HYDAC溢流阀DB08A-01-C-N-500V
In Kingbase, the user is specified to search the schema by default, or the user cannot use the function under the public schema
中文招聘文档中专业技能词抽取的跨域迁移学习
Mesh data generation function meshgrid
Rhcsa first day
随机推荐
openEuler Embedded SIG | 分布式软总线
For the first time, Chinese scientists used DNA to construct convolutional artificial neural network, which can complete 32 types of molecular pattern recognition tasks, or be used for biomarker signa
基于Paragraph-BERT-CRF的科技论文摘要语步功能信息识别方法研究
OA项目之会议通知（查询＆是否参会＆反馈详情）
[hero planet July training leetcode problem solving daily] dynamic planning on the 28th
How many tips do you know about using mock technology to help improve test efficiency?
顺序表的实现
从 Web3到Web2.5，是倒退还是另辟蹊径？
如何高效、精准地进行图片搜索？看看轻量化视觉预训练模型
ESP8266-Arduino编程实例-SPIFFS及数据上传(Arduino IDE和PlatformIO IDE)
Vimtutor编辑
入行4年，跳槽2次，我摸透了软件测试这一行~
Research on intangible cultural heritage image classification based on multimodal fusion
小程序开发需要什么技术
小程序 canvas 生成海报
Assign a string pointer to an array [easy to understand]
HCIA综合实验（以华为eNSP为例）
RHCSA第一天
Kubevera plug-in addons download address
How to search images efficiently and accurately? Look at the lightweight visual pre training model