非空验证和查找验证
<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>
邮箱验证
<body>
<form action="success.html" id="form" >
<p>
邮箱: <input type="text" name="email" id="email">
</p>
<input type="submit" value="提交">
</form>
<script>
let form = document.getElementById('form')
form.onsubmit = function (){
let email = document.getElementById('email').value;
/* 先校验是否为空 再校验里面的内容 */
/* 排除异常 */
if(email.trim() == ''){
alert('邮箱不能为空')
return false;
}
/* 邮箱的长度验证 */
if(email.length<6){
alert('邮箱长度不能小于6个字符串')
return false;
}
/* 当email里面 只要没有@或者.都进入报错提示 */
if(email.indexOf('@')==-1||email.indexOf('.')==-1){
alert('邮箱格式不正确')
return false;
}
for(var i=0;i<email.length;i++){
/* isNaN 不是数字返回true */
/* isNaN(email[i])==false就说明email[i]是数字 */
/* abc*/
/* 每次循环只截取对应索引的一位，直到遍历完整个字符串 */
var j = email.substring(i, i + 1);
// if(isNaN(email[i])==false){
if( isNaN(j)==false ){
alert('不能有数字')
return false
}
}
return true;
}
</script>
</body>
密码验证
<body>
<form action="success.html" id="form" >
<p>
输入密码: <input type="password" name="pwd" id="pwd">
</p>
<p>
再输密码: <input type="password" name="rpwd" id="rpwd">
</p>
<p>
用户名：
<input type="text" name="user" id="user">
</p>
<input type="submit" value="提交">
</form>
<script>
let form = document.getElementById('form')
form.onsubmit = function (){
let pwd = document.getElementById('pwd').value;
/* 先校验是否为空 再校验里面的内容 */
/* 排除异常 */
if(pwd.trim() == ''){
alert('密码不能为空')
return false;
}
/* 邮箱的长度验证 */
if(pwd.length<6){
alert('密码长度不能小于6个字符串')
return false;
}
let rpwd = document.getElementById('rpwd').value;
if(pwd != rpwd){
alert('两次密码不一致')
return false
}
let user = document.getElementById('user').value;
for(let i=0;i<user.length;i++){
if( isNaN(user[i])==false ){
alert('用户名不能输入数字')
return false
}
}
return true;
}
</script>
</body>
验证的提示特效
<body>
<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>
</body>
