XHTML5 ----- 表单验证（用户名、密码和email检测）

最新推荐文章于 2021-06-03 03:45:10 发布

陌听

最新推荐文章于 2021-06-03 03:45:10 发布

阅读量2.3k

点赞数

分类专栏： XHTML 文章标签： xhtml

本文链接：https://blog.csdn.net/she_rryn/article/details/48721801

版权

XHTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

指向表单元素

关于email
<form id="myForm" action="http://www.baidu.com"></form>
<input type=email name=email form="myForm">
<input type="submit" form="myForm">

关于url
<form id="myForm" action="http://www.baidu.com"></form>
<input type=url name=url form="myForm">
<input type="submit" form="myForm">

关于时间
<form id="myForm" action="http://www.baidu.com"></form>
<input type=url name=url form="myForm">
<input type="date">
<input type=time>
<input type=month>
<input type=week>
<input type=datetime>
<input type=datetime-local/>
后边两个支持率相当差，不推荐使用

关于number

关于range
<input type="range" value="100" />
<input type="range" max=10 min=0 step=1 value=5>

关于color
<input type="color" value="#34538b" />
placeholder
<input id=placeholders placeholder="点击我会以清除">

required默认验证规则
<input id=placeholder name=name required form="myForm">

自定义验证
<input name=require2 pattern="^[1-9]\d{5}$" form="myForm">

maxLength
<textarea id="notes" name="notes" maxLength="10"></textarea>

关于提示文字
<input id=placeholder name=require1 required="required" oninvalid="setCustomValidity('滚蛋')" form="myForm">
<input name=require2 pattern="^[1-9]\d{5}$" οninput="setCustomValidity('gun')" form="myForm">

autofocus自动获得焦点
maxLength<textarea id="notes" name="notes" maxLength="10" autofocus="true"></textarea>
自动完成功能，垃圾
<form action="#" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

novalidate
<form action="http://www.baidu.com" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />

</form>

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    </style>
</head>
<body>
<form action="http://www.baidu.com" method="post" οnsubmit="return check()">
    姓名<input type="text" name="uName" id="uName" οnblur="checkName()"><span id="nameMessage"></span><br/>
    密码<input type="password" name="uPwd" id="uPwd" οnblur="checkPwd()"><span id="pwdMessage"></span><br/>
    email<input type="text" name="uEmail" id="uEmail" οnblur="checkEmail()"><span id="emailMessage"></span><br/>
    <input type="submit">
</form>
<script type="text/javascript">
    /**
     * checkName()---检查用户名是否合法
     * 返回值---boolean
     * 执行成功--返回是否boolean
     */

    function checkName(){
	//找到要检测的输入框并且取得输入框当前的值
        var uName=document.getElementById("uName").value;
        var message=document.getElementById("nameMessage")
	//判断
            //是否为空    最小/大长度
        if(uName.length==0){
            message.innerText="用户名不能为空"
            return false;
        }else if(uName.length<6||uName.length>16){
            message.innerText="用户名长度在6-16位之间"
            return false;
        }else{
            message.innerText="用户名可以使用"
            return true;
        }
    }
    /**
     * checkPwd（）---检查用户输入密码是否合法
     * 返回值---boolean
     * 执行成功--返回是否boolean
     */

    function checkPwd(){
    //找到要检测的输入框并且取得输入框当前的值
        var uPwd=document.getElementById("uPwd").value;
        var message=document.getElementById("pwdMessage")
        //判断
            //是否为空    最小/大长度
        if(uPwd.length==0){
            message.innerText="密码不能为空"
            return false;
        }else if(uPwd.length<6||uPwd.length>16){
            message.innerText="用户密码长度在6-16位之间"
            return false;
        }else{
            message.innerText="恭喜你可以使用"
            return true;
        }
    }

    function checkEmail(){
	//找到要检测的输入框并且取得输入框当前的值
        var eEmail=document.getElementById("uEmail").value;
        var message=document.getElementById("emailMessage")
        //email是否合法
            //liuyunfeng2011@gmail.com
        var v1=eEmail.indexOf('@')
        var v2=eEmail.indexOf('.')
        if(v1==-1||v2==-1||v1>v2){
            message.innerHTML="请输入正确的email邮箱地址"
            return false;
        }else
        {
            //liuyunfeng2011@gmail.com
            var v=eEmail.substring(0,v1);
            message.innerHTML="邮箱正确"+v;
            return true;
        }
    }
    function check(){
        return checkName()&&checkPwd()&&checkEmail();
    }
</script>
</body>

</html>