JavaScript之简单的表单验证

　

表单验证

当输入的数据符合要求时，显示

当输入的数据不符合要求时，显示

css样式：

<style type="text/css">
        body {
            background: #ccc;
        }

        label {
            width: 40px;
            display: inline-block;
        }

        span {
            color: red;
        }

        .container {
            margin: 100px auto;
            width: 400px;
            padding: 50px;
            line-height: 40px;
            border: 1px solid #999;
            background: #efefef;
        }

        span {
            margin-left: 30px;
            font-size: 12px;
        }

        .wrong {
            color: red
        }

        .right {
            color: green;
        }

        .defau {
            width: 200px;
            height: 20px;
        }

        .de1 {
            background-position: 0 -20px;
        }
    </style>

body:

<p class="container" id="dv">
    <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/>
    <label>手机</label><input type="text" id="phone"><span></span><br/>
    <label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
    <label>座机</label><input type="text" id="telephone"><span></span><br/>
    <label>姓名</label><input type="text" id="fullName"><span></span><br/>
</p>

javaScript:

<script src="js/common.js"></script>
<script>
    //qq的
    checkInput(my$("qq"),/^\d{5,11}$/);
    //手机
    checkInput(my$("phone"),/^\d{11}$/);
    //邮箱
    checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
    //座机号码
    checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
    //中文名字
    checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
    cheackInput(my$("qq"),/^\d{5,10}$/);
    cheackInput(my$("phone"),/^[1-9]{11}$/);
    cheackInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
    cheackInput(my$("fullName"),/^[\u4e00\u9fa5]{2,6}$/);
    function checkInput(input,reg) {
        input.οnkeyup=function () {//文本框注册失去焦点的事件
            if(reg.test(this.value)){//验证文本框里的内容是否匹配
                this.nextElementSibling.innerHTML="太好了，输入正确";
                this.nextElementSibling.style.color="green";
            }else {
                this.nextElementSibling.innerHTML="警告！！！输入错误";
                this.nextElementSibling.style.color="red";
            }
        };
    }

文章最后发布于: 2018-08-03 16:58:41

相关阅读

【JavaScript】arguments.callee的作用及替换方案

arguments.callee的作用 arguments 的主要用途是保存函数参数， 但这个对象还有一个名叫 callee 的属性，返回正被执行的 Function

JavaScript返回上一页的几种方法及区别介绍

JavaScript返回上一页和刷新当前页 window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行

Ajax请求与表单提交的区别

Form表单提交 <form action="ajaxTest.json" method="post"> <input type="text" name="username"> <input type="pas

form表单提交，action需要加项目名

<form action="/addUser" method="post"><h3>添加用户信息</h3>姓名：<input type="text" name="userName" id="userName"    val

JavaScript中textContent、innerText和innerHTML的用

目录 0.码仙励志 1.textContent的用法 1.设置标签中的文本内容 2.获取标签中的文本内容 2.innerText的用法 1.设置标签中的文本内