表單的本地驗證
<!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>