Rumah > Artikel > hujung hadapan web > Cara menggunakan JavaScript untuk mengesahkan borang

Cara menggunakan JavaScript untuk mengesahkan borang

PHPzke hadapan: 2016-05-16 15:57:471644semak imbas

1. Prinsip

Borang disahkan dengan menambahkan acara onblur dalam kotak input Apabila kotak input hilang fokus, fungsi js akan menentukan nilai input, mengendalikan dokumen. dan menukar kandungan di belakang kotak input melalui atribut innerHTML Gesaan dipaparkan.

Akhir sekali, tambahkan acara onsubmit dalam teg borang, dan panggil fungsi js apabila butang pendaftaran diklik Hanya apabila nilai semua kotak input memenuhi keperluan, benar akan dikembalikan, dan borang akan diserahkan. Jika tidak, pulangkan palsu dan borang tidak akan diserahkan.

2. Gambar

Cara menggunakan JavaScript untuk mengesahkan borang

3. $/" , ^ bermaksud padanan dari awal, $ bermaksud padanan dengan aksara terakhir. Contohnya,

var reg=/^w [@]w [.comn]{3,4}$/;biasa Ungkapan w mewakili a-z, A-Z, 0-9 juga termasuk garis bawah.

Biasanya gunakan kaedah ujian biasa untuk menentukan sama ada rentetan sepadan dengan ungkapan biasa Jika nilai pulangan adalah benar, padanan itu berjaya Jika palsu dikembalikan, padanan itu gagal.

4. Kod pelaksanaan

Untuk lebih banyak tutorial berkaitan, sila lawati

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用JavaScript完成表单的校验</title>
        <script>
            //校验用户名
            function checkName(){
                var name=document.getElementById("name").value;
                var nameSpan=document.getElementById("nameSpan")
                //正则表达式判断用户名
                var reg=/^\w+$/;
                if(name.length<1){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>用户名不能为空</font>"
                    }else if(name.length<=6){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>用户名要至少六位</font>"
                    }else if(!reg.test(name)){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>只能由字母数字下划线组成</font>"
                    }else{
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                        return true;
                    }
                }
            //校验密码
            function checkCode(){
                var code=document.getElementById("code").value;
                var codeSpan=document.getElementById("codeSpan")
                if(code==&#39;&#39;){
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>密码不能为空</font>"
                }else if(code.length<6){
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>密码至少六位</font>"
                }else{
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                    return true;
                }
            }
            //校验邮箱
            function checkEmail(){
                var email=document.getElementById("email").value;
                var emailSpan=document.getElementById("emailSpan")
                //用正则判断邮箱格式
                var reg=/^\w+[@]\w+[.comn]{3,4}$/;
                if(email==&#39;&#39;){
                        emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>邮箱不能为空</font>"
                }else if(!reg.test(email)){
                    emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>邮箱格式不正确</font>"
                }else{
                    emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                    return true;
                }
            }
            //校验所有信息，决定表单是否提交
            function checkForm(){
                if(checkName()&&checkCode()&&checkEmail()){
                    return true;
                }
                return false;
            }
        </script>
    </head>
    <body>
            <form id="regist" onsubmit="return checkForm()" action="http://www.baidu.com" method="get" style="margin-left: 520px;width: 400px;padding-left: 20px; height: 280px;border: 1px solid darkgray;">
                <h3>注册表单</h3>
                用户名：<input type="text" id="name" name="username" onblur="checkName()"/>
                    <span id="nameSpan" ></span><br/><br />
                 密码：<input type="password" id="code" name="password" onblur="checkCode()"/>
                    <span id="codeSpan"></span><br/><br />
                 邮箱：<input type="text" id="email" name="email" onblur="checkEmail()"/>
                    <span id="emailSpan"></span><br/><br />
                      <input type="submit" value="注册"/>
                 <input type="reset" value="重置"/>
            </form>
    </body>
</html>

Tutorial video JavaScript

Kenyataan：

Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Javascript mendapat kemahiran koordinat dokumen dan koordinat_javascript port pandangArtikel seterusnya：Javascript mendapat kemahiran koordinat dokumen dan koordinat_javascript port pandang

Artikel berkaitan

Lihat lagi