1：字符串非空验证和查找验证
<body>
<form action="success.html" id="form" >
<p>
用户名: <input type="text" name="username" id="username">
</p>
<input type="submit" value="提交">
</form>
<script>
let form = document.getElementById('form')
form.onsubmit = function (){
/* 字符串非空验证 */
let username = document.getElementById('username').value;
/* 字符串的trim()方法可以去除左右的空格 */
if(username.trim() == ''){
alert('用户名不能为空')
/* 阻止表单提交的默认事件 */
return false;
}
/* 继续执行默认事件 */
return true;
/*
字符串查找验证
var str="this is JavaScript";
str.indexOf('is')
2
var str="this is JavaScript";
从下标是3的位置开始寻找 找的到返回对应的下标
找不到返回 -1
str.indexOf('is',3)
5
str.indexOf('is',6)
-1
*/
}
</script>
</body>
2：校验提示特效练习：
邮箱不得为空，密码不得为空且不得少于6个字符。点击文本框边框颜色变为红色，后面出现提示文字。颜色为红色。
<form action="success.html">
<p>
email：
<input type="text" name="email" id="email" onblur="blurFn()">
<span id="s"></span>
</p>
<p>
密码：
<input type="text" name="pwd" id="pwd" onblur="blurFn2()">
<span id="ps"></span>
</p>
<input type="submit" value="提交">
</form>
<script>
let form = document.querySelector('form')
let email = document.getElementById('email');
let s = document.getElementById('s')
let pwd = document.getElementById('pwd')
let ps = document.getElementById('ps')
function blurFn2(){
if(pwd.value.trim()==''){
ps.innerHTML = '密码不能为空'
ps.style.color = 'red'
return false
}
ps.innerHTML = ''
ps.style.color = ''
return true
}
function blurFn(){
if(email.value.trim()==''){
/* 不要加封号 */
email.style.border = '1px solid red'
s.innerHTML = '不能为空'
s.style.color = 'red'
return false;
}
email.style.border = '';
s.innerHTML = '';
s.style.color = '';
return true;
}
form.onsubmit = function (){
if( blurFn()&&blurFn2() ){
return true
}
return false;
}
</script>
