Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

JS开发验证表单教程之前端布局

验证表单

下面我们就来学习如何用 js 验证表单

html代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="div">
        <form>
            <label>用户名:</label>
            <input type="text" class="name" id="name">
            <div id="sp" class="div"></div>                
            <label>密 码:</label>
            <input type="password" class="pwd" id="pwd">
            <div id="sp1" class="div"></div>
            <label>邮 箱:</label>
            <input type="text" class="email" id="email">
            <div id="sp2" class="div"></div>
            <label>爱 好:</label>
            <textarea rows="5" cols="30" class="txt" id="txt"></textarea>
            <div id="sp3" class="div"></div>
            <input type="button" class="sub" value="注册" id="sub">
        </form>
    </div>
</body>
</html>

我们来看以下预览的效果图：

布局_1.png

在处理页面样式之前，我们先看下代码

每一个文本框或者文本域，下面都有一个div 标签，这个是用来做什么的呢，当我们使用javascript  验证表单的时候，如果没有输入内容，我们将会给出提示信息，并把提示信息的内容放在div 标签中

上述代码中，我们看到了 id  和 class 属性，我们可以通过这些来进行制作样式

这是没有使用css 来进行处理样式，所以会显的很难看，我们接下来就使用css 来改变样式

Weiter lernen
||
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title></title> </head> <body>     <div id="div">         <form>             <label>用户名:</label>             <input type="text" class="name" id="name">             <div id="sp" class="div"></div>                             <label>密 码:</label>             <input type="password" class="pwd" id="pwd">             <div id="sp1" class="div"></div>             <label>邮 箱:</label>             <input type="text" class="email" id="email">             <div id="sp2" class="div"></div>             <label>爱 好:</label>             <textarea rows="5" cols="30" class="txt" id="txt"></textarea>             <div id="sp3" class="div"></div>             <input type="button" class="sub" value="注册" id="sub">         </form>     </div> </body> </html>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492873 spielt ab