表单的相关方法（如登录注册格式的判定）_$("type=[reset]").on('click',function(){})-CSDN博客

本文链接：https://blog.csdn.net/qq_52928592/article/details/129206976

<style>

p {

color: red;

}

.show {

width: 300px;

height: 200px;

border: 2px solid blue;

display: none;

}

</style>

</head>

<body>

用户名: <input type="text" name="username" />

<p></p>

<br />

密码: <input type="password" name="password" />

<p></p>

<br />

<!-- <input type="submit" value="提交" />

<!-- <button type="submit">提交按钮</button>

</form>

<hr />

// 1.表单的提交事件

// console.log(document.forms);

document.forms[0].onsubmit = function (e) {

let username = document.querySelector("input[name='username']");

let password = document.querySelector("input[name='password']");

// 判断用户名用户名的长度>6

if (username.value.length < 6) {

username.nextElementSibling.innerHTML = `<span color="red">用户名不规范,用户名长度>6</span>`;

}

// 判断密码的长度 [6,16]

if (password.value.length < 6 || password.value.length > 16) {

// alert('密码不规范,请输入6-16位的密码')

password.nextElementSibling.innerHTML = `<span >密码不规范,请输入6-16位的密码</span>`;

}

return false; //阻止默认事件

// e.preventDefault()

};

// 2.表单的重置事件

document.forms[0].onreset = function () {

let res = confirm("确认要清空吗?");

if (!res) {

return false; //阻止重置按钮的默认事件

}

};

// form表单外部的按钮也可以调用表单的事件

let sub = document.querySelector("button[type='submit']");

let reset = document.querySelector("button[type='reset']");

sub.onclick = function () {

document.forms[0].onsubmit();

};

reset.onclick = function () {

document.forms[0].onreset();

};

</script>

<input type="radio" name="sex" value="female">女

<input type="radio" name="sex" checked value="male">男

// 3.聚焦

let search = document.getElementsByName("search");

let show = document.querySelector(".show");

search[0].onfocus = function () {

show.style.display = "block";

};

// 4.失焦

search[0].onblur = function () {

show.style.display = "none";

};

// 5.输入框输入事件

search[0].oninput = function () {

console.log("============input=========");

console.log(this.value);

};

// 6.输入框值改变 (失焦触发change)

search[0].onchange = function () {

console.log("============change=========");

console.log(this.value);

};

// 7.获取选中的值 (单选框/多选框)

let btns1 = document.querySelectorAll('input[type="radio"]')

console.log(btns1[0].checked);

console.log(btns1[1].checked);

btns1[1].checked = false

// 8.获取input输入框中的值

// ele.value

</script>