JavaScript学习笔记2

最新推荐文章于 2024-08-17 12:54:01 发布

cg_Amaz1ng

最新推荐文章于 2024-08-17 12:54:01 发布

阅读量350

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/cg_Amaz1ng/article/details/76691648

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

表单验证

邮箱验证一般使用正则表达式：

【1】^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$

【2】/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/

在输入控件失去焦点时进行验证：

失去焦点的事件为onblur
获得焦点的事件为onfocus

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="Untitled-1.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id='form1' name="form1" action='Untitled-2.html' method="post" onSubmit="return validateForm()">
    请输入Email:<input type='text' id="emailInput" name='emailInput' class='init'></input>
    <input type='submit' value="提交" id="submit" name="submit"></input>
</form>
<script type="text/javascript">
    function validateEmail(){
        var emailInput = document.getElementById('emailInput');
        var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
        if(reg.test(emailInput.value)){
            emailInput.className = 'right';
            return true;
        }
        else{
            emailInput.className = 'wrong';
            return false;
        }
    }
    function validateForm(){
            return validateEmail();
    }
    window.onload = function(){
        document.getElementById('emailInput').addEventListener('blur',validateEmail,false);
        document.getElementById('form1').addEventListener('submit',validateForm,false);
    }

</script>
</body>
</html>

css文件下附：

@charset "utf-8";
/* CSS Document */

.init{
    border-color:#000000;
    font-size:20px;
    border-width:3px;
}

.wrong{
    border-color:#FF0000;
    font-size:20px;
    border-width:3px;   
}

.right{
    border-color:#00FF00;
    font-size:20px; 
    border-width:3px;
}

cg_Amaz1ng

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记2

表单验证邮箱验证一般使用正则表达式：【1】^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$【2】/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/在输入控件失去焦点时进行验证：失去焦点的事件为onblur获得焦点的事件为onfocus
复制链接

扫一扫

专栏目录