表单的本地验证
<!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>
<!--原生js-->
<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>