web10(表单的本地验证+Ajax)

技术2026-08-12 2

表单的本地验证

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单的本地验证</title> </head> <body> <form> 用户名：<input type="text" name="uid" autocomplete="off"><span></span><br> 密码：<input type="password" name="pwd"><span></span><br> <button type="submit">提交</button> </form>  <script> var form = document.forms[0]; /*间接表单提交时间 * 1.e.preventDefault(); * 2.返回一个false值 * */ form.onsubmit = function (e) { var key = true; if(form.uid.value.length <6){ key = false; } if(form.pwd.value.length <8){ key = false; } return key; }; /*间接添加焦点事件*/ form.uid.onfocus = function () { // 当函数是由事件触发调用的，那么this表示触发事件的元素 var tips = this.nextElementSibling; tips.innerHTML = '字母为首的字母数字和下划线6-18位'; tips.style.color = 'black'; }; /*间接失去焦点事件*/ form.uid.onblur = function () { var tips = this.nextElementSibling; var txt = this.value; /*如果用户没填写信息*/ if(!txt){ tips.innerHTML = ''; }else{ /* / /表示正则表达式，i表示忽略大小写 */ if(/^[a-z][a-z0-9_]{5,17}$/i.test(txt)){ tips.innerHTML = '正确'; tips.style.color = 'green'; }else{ tips.innerHTML = '错误'; tips.style.color = 'red'; } } } </script> </body> </html>

运行效果将光标放入第一个输入框中当输入错误值时当输入一个正确的值时

表单本地验证2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单本地验证2</title> </head> <body> <form> <div> 性别： <label> <input type="radio" name="gender" value="0"> 男 </label> <label> <input type="radio" name="gender" value="1"> 女 </label> </div> <div> 爱好: <label> <input type="checkbox" name="hobby" value="1"> 音乐 </label> <label> <input type="checkbox" name="hobby" value="1"> 美术 </label> <label> <input type="checkbox" name="hobby" value="1"> 美食 </label> <label> <input type="checkbox" name="hobby" value="1"> 购物 </label> <label> <input type="checkbox" name="hobby" value="1"> 旅游 </label> <label> <input type="checkbox" name="hobby" value="1"> 健身 </label> <label> <input type="checkbox" name="hobby" value="1"> 电子竞技 </label> 最少选择2个，最多选择5个。 </div> <div> <button type="submit">提交</button> </div> </form> <script> var form = document.forms[0]; //单选框的本地控制:获取选中项的值：两种方法 //方法1 /* var value; for(var i=0;i<form.gender;i++){ if(form.gender[i].checked){ value = form.gender[i].value } }*/ //方法2 /* 方法1可以简写成单条语句 form.gender.value; form.gender[i].value的全称 form.gender[form.gender.selectedIndex].value; //设置默认选中的语句 form.gender[1].checked = true; document.write( //单选获取选中项的值 this.gender.value ); //获取单选框选中的值 form.onsubmit = function () { alert(this.gender.value) }*/ form.onsubmit = function () { var n = 0; //复选获取选中项的值 for (var i = 0; i < this.hobby.length; i++) { //表示复选框当前的选项被选中，选择的个数加1 if (this.hobby[i].checked) { n++; } } alert( /*打印复选选中的长度（个数）*/ n ); return false; }; // 复选的本地控制 for (var i = 0; i < form.hobby.length; i++) { form.hobby[i].onchange = function () { var n = 0; for (var i = 0; i < form.hobby.length; i++) { if (form.hobby[i].checked) { n++; } } if (n < 2) { //当前程序强制选中 this.checked = true; } if (n > 5) { //当前程序强制不选中 this.checked = false; } } } </script> </body> </html>

效果图当选中5个后，不会再选了当选中的类型只有两个是，第二个选中的值也取消不了

联动菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>联动菜单</title> </head> <body> <form action=""> 省：<select name="province" ></select> 市：<select name="city" ></select> 区：<select name="area" ></select> </form> <script> var form = document.forms[0] var p = form.province; var c = form.city; var a = form.area; var data = [ {code:'610000',name:'陕西省'}, {code:'610100',name:'西安市'}, {code:'610300',name:'宝鸡市'}, {code:'610326',name:'眉县'}, {code:'612500',name:'商洛市'}, {code:'610101',name:'碑林区'}, {code:'610121',name:'长安区'}, {code:'610102',name:'新城区'}, {code:'410000',name:'河南省'}, {code:'411100',name:'漯河市'}, {code:'411121',name:'舞阳县'}, {code:'430000',name:'湖南省'}, {code:'430100',name:'长沙市'}, {code:'430181',name:'浏阳市'} ]; p.add(new Option('请选择...',0)); c.add(new Option('请选择...',0)); a.add(new Option('请选择...',0)); // 留课后练习的内容，百度查找总结，js的数组遍历的方法 for(var i=0;i<data.length;i++){ if(data[i].code.slice(-4) == '0000'){ p.add(new Option(data[i].name,data[i].code)); } } p.onchange = function () { c.length = 1; a.length = 1; var code = p.value.slice(0,2); for(var i=0;i<data.length;i++){ if( data[i].code.slice(0,2) == code && data[i].code.slice(2,4) != '00' && data[i].code.slice(-2) == '00' ){ c.add(new Option(data[i].name,data[i].code)); } } } c.onchange = function () { a.length = 1; var code = c.value.slice(0,4); for(var i=0;i<data.length;i++){ if( data[i].code.slice(0,4) == code && data[i].code.slice(-2) != '00' ){ a.add(new Option(data[i].name,data[i].code)); } } } </script> </body> </html>

下拉菜单的语法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>联动菜单的语法说明</title> </head> <body> <select id="aa" size="6"> <option>1</option> <option>2</option> <option>3</option> </select> <script> var select = document.getElementById('aa'); // select.options 代表select的所有option的集合 // 新建：new Option(文本，值) var opt = new Option('新的','value'); // 插入: // select.add(opt,null/index/option); //插入到索引值为1的位置 select.add(opt,1); //select.options 代表select的所有option的集合， select.add(opt,select.options[1]); /*改变*/ //方式1 // var opt2 = new Option('1.5','value'); // select.options[1] = opt2; //方式2 select.options[1].text = '1.6'; select.options[1].value = '1.6'; // 移除：删除多个，删除单个 // select.length = 2; // select.options.length = 2; // select.remove(1) // select.options.remove(1); // select.options[1].remove(); // 读取选中项的值： select.value; select.options[select.options.selectedIndex].value; // 读取选中项的文本： // select.text（没有这种简写） select.options[select.options.selectedIndex].text; select[select.selectedIndex].text; </script> </body> </html>

Processed: 0.009, SQL: 10