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
}
复制代码
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]是数字
复制代码
每次循环只截取对应索引的一位,直到遍历完整个字符串
var j = email.substring(i, i + 1);
if(isNaN(email[i])==false){
if( isNaN(j)==false ){
alert('不能有数字')
return false
}
}
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;
}
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;
作者:玛卡巴卡起来嗨
链接:juejin.cn/post/704889…
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。