今天晚上用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. ssh代理转发

    实验环境 serverA:172.16.2.116 serverB:172.16.2.225 serverC:172.16.2.115 "代理转发"是针对ssh认证过程的一种转发 ...

  2. jenkins pipeline设置

    转:https://mp.weixin.qq.com/s/MwyBsUWUQASGMr_erGfzZA

  3. CSS之单行、多行文本溢出显示省略号

    单行文本溢出显示省略号: overflow: hidden text-overflow: ellipsis white-space: nowrap 多行文本溢出 display: -webkit-bo ...

  4. 如何在pyqt中实现平滑滚动的QScrollArea

    平滑滚动的视觉效果 Qt 自带的 QScrollArea 滚动时只能在两个像素节点之间跳变,看起来很突兀.刚开始试着用 QPropertyAnimation 来实现平滑滚动,但是效果不太理想.所以直接 ...

  5. Spring service本类中方法互相调用事物失效问题

    简介 Spring事物利用的是AOP,动态代理采用CGLIB代理(默认,也可以用Proxy代理,但是Proxy代理效率低于CGLIB代理).故只要弄懂Spring的AOP实现,就知道为什么servic ...

  6. Maven 警告 expected START_TAG or END_TAG not TEXT

    原因 在Maven警告提示区域存在空格等不规范字符,在网上复制到项目中时经常出现类似问题. pop.xml文件,setting.xml文件极易出现此类问题. 解决 将空格删除,规范一下格式就好了. 示 ...

  7. 入门-Kubernetes概述 (一)

    1 Kubernetes是什么 Kubernetes是Google在2014年开源的一个容器集群管理系统,Kubernetes简称K8S. K8S用于容器化应用程序的部署,扩展和管理. K8S提供了容 ...

  8. git rebase git merge

    Git rebase 使用方法 1. git checkout feature 2. git rebase master feature 相当于git rebase master + git chec ...

  9. 友盟分享，极光推送Demo

    友盟分享SDK下载及官方文档 http://dev.umeng.com/social/ios/detail-share 1.注册应用获取App友盟Appkey(556d14ad67e58eb08400 ...

  10. CheckStyle使用手册(一)

    介绍 CheckStyle是SourceForge下的一个项目,提供了一个帮助JAVA开发人员遵守某些编码规范的工具.它能够自动化代码规范检查过程,从 而使得开发人员从这项重要,但是枯燥的任务中解脱出 ...