今天晚上用layui模板做了一个简单的注册表单，功能主要有可以js验证密码重复，可以验证手机号码。

这是界面

下面是我的html文件代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="layui/css/layui.css" media="all">

</head>

<body>

<form class="layui-form" action="register?method1=register" method="post">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

        <legend>用户注册</legend>

    </fieldset>

    <div class="layui-form-item">

        <label class="layui-form-label">姓名</label>

        <div class="layui-input-inline">

            <input type="text" name="username" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">

        </div>

    </div>

    <div class="layui-form-item">

        <label class="layui-form-label">密码</label>

        <div class="layui-input-inline">

            <input type="password" id="pwd1"  name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">

        </div>

        <div class="layui-form-mid layui-word-aux">辅助文字</div>

    </div>

    <div class="layui-form-item">

        <label class="layui-form-label">重复密码</label>

        <div class="layui-input-inline">

            <input type="password" id="pwd2" onkeyup="validate()" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">

        </div>

    </div>

    <div class="layui-form-item">

        <label class="layui-form-label">手机号</label>

        <div class="layui-input-inline">

            <input type="text" name="phone" id="phone" onblur="isPhone(this.value)" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">

        </div>

    </div>

    <div class="layui-form-item">

        <label class="layui-form-label">单位</label>

        <div class="layui-input-inline">

            <select name="work" lay-verify="required">

                <option value=""></option>

                <option value="政府机构">政府机构</option>

                <option value="个体户">个体户</option>

            </select>

        </div>

    </div>

    <div class="layui-form-item">

        <div class="layui-input-block">

            <input class="layui-btn" type="submit" value="立即提交"></input>

            <button type="reset" class="layui-btn layui-btn-primary">重置</button>

        </div>

    </div>

</form>

<script src="layui/layui.all.js" charset="utf-8"></script>

<script>

    //Demo

    function validate() {

        var pwd1 = document.getElementById("pwd1").value;

        var pwd2 = document.getElementById("pwd2").value;

        <!-- 对比两次输入的密码 -->

        if(pwd1!=pwd2) {

            alert("两次密码输入不同");

            document.getElementById('pwd2').value="";

        }

    }

    function isPhone(card)

    {

        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X

        var reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;

        if(reg.test(card) === false)

        {

            alert("电话号码输入有误!");

            document.getElementById('phone').value="";

        }

    }

    layui.use('form', function(){

        var form = layui.form;

    });

</script>

</body>

</html>

layui模板注册表单的更多相关文章

  1. 免费 PSD 下载： 20个精美的登录和注册表单

    注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...

  2. 如何利用WordPress创建自定义注册表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  3. Ruby Rails学习中：注册表单，注册失败，注册成功

    接上篇 一. 注册表单 用户资料页面已经可以访问了, 但内容还不完整.下面我们要为网站创建一个注册表单. 1.使用 form_for 注册页面的核心是一个表单, 用于提交注册相关的信息(名字.电子邮件 ...

  4. Html注册表单示例

    注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>.   <html>   <head>   <title>注册表单&l ...

  5. HTML6注册表单输入日志标题

    一.找到元素. var d = document.getElementById("") var d = document.getElementsByName("" ...

  6. form注册表单圆角 demo

    form注册表单圆角 <BODY> <div class="form"> <ul class="list"> <li& ...

  7. 模拟js中注册表单验证

    示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  8. UX设计秘诀之注册表单设计，细节决定成败

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...

  9. 基于HTML5手机登录注册表单代码

    分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

随机推荐

  1. 机器学习-softmax回归 python实现

    ---恢复内容开始--- Softmax Regression 可以看做是 LR 算法在多分类上的推广,即类标签 y 的取值大于或者等于 2. 假设数据样本集为:$\left \{ \left ( X ...

  2. GitHub镜像

    GitHub 官网镜像(可以用来clone push等,但是不能登录) https://github.com.cnpmjs.org https://git.sdut.me https://hub.fa ...

  3. maven项目 子父级工程。

    一 .什么是 maven 子父级工程? 建立一个maven项目,然后在该项目 下创建一个module,子级的maven,他继承于父级项目. 1.新建立 maven项目,file  ------new- ...

  4. 火爆的文字游戏你玩了吗？「GitHub 热点速览 v.22.06」

    不知道你有没有被 Wordle 这款游戏刷屏,在本期热点速览的特推部分选了一个 React 编写的开源版本同你分享,而本次公众号摘要也是一个提示, 只不过这个只能盲猜了.别小瞧 Wordle 这个游戏 ...

  5. ApacheCN - 关于我们

    1.简单介绍一下 ApacheCN? ApacheCN 是 2016 年 8 月份就开始搭建网站雏形, 2017 年 6 月份正式全职来做,是国内第一个有组织性.敢带人装逼.敢真的分享.并且敢戴绿帽的 ...

  6. ApacheCN JavaScript 译文集 20211122 更新

    JavaScript 编程精解 中文第三版 零.前言 一.值,类型和运算符 二.程序结构 三.函数 四.数据结构:对象和数组 五.高阶函数 六.对象的秘密 七.项目:机器人 八.Bug 和错误 九.正 ...

  7. 「JSOI2018」机器人

    在本题当中为了方便,我们将坐标范围改至 \((0 \sim n - 1, 0 \sim m - 1)\),行走即可视作任意一维在模意义下 \(+1\). 同时,注意到一个位置只能经过一次,则可以令 \ ...

  8. 在Rainbond中实现数据库结构自动化升级

    Rainbond 这款产品一直致力于打通企业应用交付的全流程,这个流程中不可或缺的一环是企业应用的不断升级.迭代.Rainbond 特有的能力,是可以将囊括多个服务组件的企业应用系统进行打包,并执行一 ...

  9. java创建自定义类的对象数组

      1 public class Student{ 2 static int number = 0; // 静态变量的访问可以不用创建类的实例就可就可使用< 类名.属性 >的方法访问 3 ...

  10. 位运算符、|和||、&和&&的区别

    一.位运算符操作的都是整数类型 1.<<:左移,在一定范围内向左移动n位,相当于乘以2的n次幂 左移不管是正数还是负数,都是在后面添0: 2.>>:右移,在一定范围内向右移动n ...