AngularJS实现注册表单验证功能


Posted in Javascript onOctober 16, 2017

本文为大家分享了案例: 注册表单验证,供大家参考,具体内容如下

需要使用的两张图片:

dui.gif:AngularJS实现注册表单验证功能cuo.gif:AngularJS实现注册表单验证功能

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="jquery.1.12.4.js"></script>
  <!--jquery样式-->
  <script type="text/javascript">
    //email验证
    $(function(){
      //input标签获取焦点/失去焦点时调用方法
      $(":input[name='email']").blur(function(){
        //获取input的内容
        var email = $(this).val();
        //给定输入内容的模板(email格式模板)
        var reg = /\w+[@]{1}\w+[.]\w+/;
        //将input的内容放入到模板中,进行判断
        if(reg.test(email)){
          //格式正确:输出“用户名可用”
          $(":input[name='check-email']").val("用户名可用");
          //声明正确时调用的图片
          image1 = "dui.gif";
          //将图片放入到img标签中
          $("#img1").attr("src", image1);
        }else{
          //格式错误:输出“请填写有效的Email地址”
          $(":input[name='check-email']").val("请填写有效的Email地址");
          //声明正确时调用的图片
          image1 = "cuo.gif";
          //将图片放入到img标签中
          $("#img1").attr("src", image1);
        }
      });
    });
    //name验证
    $(function(){
      $(":input[name='name']").blur(function(){
        var name = $(this).val();
        //判断输入内容是大于四个字符
        if(name.length > 4){
          $(":input[name='check-name']").val("输入正确");
          image2 = "dui.gif";
          $("#img2").attr("src", image2);
        }else{
          $(":input[name='check-name']").val("输入信息错误");
          image2 = "cuo.gif";
          $("#img2").attr("src", image2);
        }
      });
    });
    //password验证-第一次
    $(function(){
      $(":input[name='password-one']").blur(function(){
        var name = $(this).val();
        //判断密码是否大于6个字符
        if(name.length > 6){
          $(":input[name='check-password-one']").val("密码可用");
          image3 = "dui.gif";
          $("#img3").attr("src", image3);
        }else{
          $(":input[name='check-password-one']").val("密码不可用");
          image3 = "cuo.gif";
          $("#img3").attr("src", image3);
        }
      });
    });
    //password验证-第二次
    $(function(){
      $(":input[name='password-two']").blur(function(){
        var name1 = $(":input[name='password-one']").val();
        var name2 = $(this).val();
        //首先判断密码是否大于6个字符
        if(name2.length > 6){
          //然后判断两次密码是否一致
          if(name2 == name1){
            $(":input[name='check-password-two']").val("密码可用");
            image4 = "dui.gif";
            $("#img4").attr("src", image4);
          }else{
            $(":input[name='check-password-two']").val("密码不可用");
            image4 = "cuo.gif";
            $("#img4").attr("src", image4);
          }
        }else{
          $(":input[name='check-password-two']").val("密码不可用");
          image4 = "cuo.gif";
          $("#img4").attr("src", image4);
        }
      });
    });
  </script>
  <!--css样式-->
  <style type="text/css">
    img{width: 15px; height: 15px}
    .left{width: 200px; text-align: right}
    .right{width: 400px}
    .bjs{background-color: limegreen}
    .btn{margin: 20px 0 0 300px}
  </style>
</head>
<body>
<h4 style="color: red">以下均为必填项</h4>
<form>
  //table表格样式:边框为1,内部填充为10,外部填充为0
  <table border="1" cellpadding="10" cellspacing="0">
    <tr>
      <td class="left">请输入您的Email地址:</td>
      <td class="right">
        <input class="bjs" name="email">
        <img id="img1" src="cuo.gif" />
        <input type="text" name="check-email" style="border: 0px" />
      </td>
    </tr>
    <tr>
      <td class="left">设置您在当当网的昵称:</td>
      <td class="right">
        <input class="bjs" name="name">
        <img id="img2" src="cuo.gif" />
        <input type="text" name="check-name" style="border: 0px" />
      </td>
    </tr>
    <tr>
      <td class="left">设置密码:</td>
      <td class="right">
        <input class="bjs" name="password-one">
        <img id="img3" src="cuo.gif" />
        <input type="text" name="check-password-one" style="border: 0px" />
      </td>
    </tr>
    <tr>
      <td class="left">再次输入您设置的密码:</td>
      <td class="right">
        <input class="bjs" name="password-two">
        <img id="img4" src="cuo.gif" />
        <input type="text" name="check-password-two" style="border: 0px" />
      </td>
    </tr>
  </table>
  <input class="btn" type="button" value="注册" />
</form>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 #Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 #Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 #Javascript
angular4中关于表单的校验示例
Oct 16 #Javascript
原生JS实现小小的音乐播放器
Oct 16 #Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 #Javascript
You might like
深入了解php4(2)--重访过去
2006/10/09 PHP
一个改进的UBB类
2006/10/09 PHP
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
python字符串替换示例
2014/04/24 Python
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
详解python中递归函数
2019/04/16 Python
深入解析神经网络从原理到实现
2019/07/26 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
毕业生自我推荐
2013/11/04 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
正科级干部考察材料
2014/05/29 职场文书
代办委托书怎么写
2014/08/01 职场文书
股权转让协议范本
2014/12/07 职场文书
应届生简历自我评价
2015/03/11 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
迎国庆主题班会
2015/08/17 职场文书