基于Vuejs和Element的注册插件的编写方法


Posted in Javascript onJuly 03, 2017

1.首先要在HTML文档中引入jQuery版本2.0以下的、一个vuejs库 一个Element-UI库

<script src="js/jquery-1.11.0.min.js"></script>
 <script src="js/vue.js"></script>
 <script src="js/Element-UI.js"></script>

2.HTML的布局 

<div id="app">
  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
    <el-form-item label="名字" prop="name">
      <el-input type="text" v-model="ruleForm2.name" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="昵称" prop="niceName">
      <el-input type="text" v-model="ruleForm2.niceName" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm2.password" type="password"></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="ruleForm2.phone" type="tel"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="ruleForm2.email" type="email"></el-input>
    </el-form-item>
    <el-form-item label="身份证号码" prop="identity">
      <el-input v-model="ruleForm2.identity" type="number"></el-input>
    </el-form-item>
    <el-form-item label="QQ" prop="qq">
      <el-input v-model="ruleForm2.qq" type="number"></el-input>
    </el-form-item>
    <el-form-item label="微信号" prop="wechat">
      <el-input v-model="ruleForm2.wechat" type="text"></el-input>
    </el-form-item>
    <el-form-item label="个性签名" prop="signature">
      <el-input type="textarea" v-model="ruleForm2.signature"></el-input>
    </el-form-item>
     <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
      <el-button @click="resetForm('ruleForm2')">重置</el-button>
    </el-form-item>
  </el-form>
</div>

3.js部分内容的编写,带正则验证的

var Main = {  data(){
    // 验证名字正则表达式
    var validateName = (rule, value, callback) => {
      var regExp=/^[\u4e00-\u9fa5]{2,4}$/;
    if (value === '') {
      callback(new Error('请输入名字'));
    }else if(regExp.test(value) === false){
      callback(new Error('请输入正确的名字'))
    } else {
      callback();
    }
  };
    //  验证昵称正则表达式
    var validateName2 = (rule, value, callback) => {
      var regExp=/^[\u4e00-\u9fa5]{2,4}$/;
      if (value === '') {
        callback(new Error('请输入昵称'));
      }else if(regExp.test(value) === false){
        callback(new Error('请按格式输入昵称'))
      } else {
        callback();
      }
  };
    //验证密码正则表达式
    var validatePass = (rule, value, callback) => {
      var regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (regExp.test(value) === false) {
        callback(new Error('8-16字母和数字组成,不能是纯数字或纯英文'))
      } else {
        callback()
      }
    }
    //验证电话号码正则表达式
    var validateTel = (rule, value, callback) => {
      var regExp = /^1[3|5|8|7][0-9]{9}$/;
    if (value === '') {
      callback(new Error('请输入手机号码'));
    }else if (regExp.test(value) === false) {
      callback(new Error('请输入正确手机号码'))
    } else {
      callback();
    }
  };
    //验证身份正号码正则表达式
    var validateIdentity = (rule, value, callback) => {
      var regExp = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (value === '') {
        callback();
      }else if (regExp.test(value) === false) {
        callback(new Error('请输入身份证号码'))
      } else {
        callback();
      }
    };
    //验证QQ号码正则表达式
    var validateQQ = (rule, value, callback) => {
      var regExp =/^[1-9][0-9]{5,10}$/;
      if (value ==='') {
        callback();
      }else if (regExp.test(value) === false) {
        callback(new Error('请输入正确的QQ号码'))
      } else {
        callback();
      }
    };
    //验证微信号码正则表达式
    var validateWechat = (rule, value, callback) => {
      var regExp =/^[a-zA-Z\d_]{5,}$/;
      if (value === '') {
        callback();
      }else if (regExp.test(value) === false) {
        callback(new Error('请输入正确的微信号'))
      } else {
        callback();
      }
    };
    return {
      ruleForm2: {
        name: '',
        niceName: '',
        password: '',
        phone:'',
        identity:'',
        qq:'',
        wechat:'',
        signature:''
      },
      rules2: {
        name: [
          { validator: validateName, trigger: 'blur' }
        ],
        niceName: [
          { validator: validateName2, trigger: 'blur' }
        ],
        password: [
          { validator:validatePass , trigger: 'blur' }
        ],
        phone: [
          { validator:validateTel , trigger: 'blur' }
        ],
        email: [
          { required: false, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
        ],
        identity: [
          { validator:validateIdentity , trigger: 'blur' }
        ],
        qq: [
          { validator:validateQQ , trigger: 'blur' }
        ],
        wechat: [
          { validator:validateWechat , trigger: 'blur' }
        ],
        signature: [
        { required: false, message: '请填写活动形式', trigger: 'blur' }
      ]
      }
    };
    },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        var _self = this
        $.ajax({
          url: 'http://192.168.0.150:8080/user/userRegister',
          type: 'POST',
          data: _self.ruleForm2,
        }).done(function(data) {
          console.log(data)
        }).fail(function(data) {
          //用于注册完成后的页面跳转
          console.log(data)
        })
      } else {
        //注册信息不符合规则
        console.log('error submit!!');
        return false;
        }
      });
    },
    //重新填写注册信息
    resetForm(formName) {
      this.$refs[formName].resetFields();
      }
    }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

在这说明以下交互部分用jQuery写的,更改$.ajax的URL部分是可以直接用的

以上所述是小编给大家介绍的基于Vuejs和Element的注册插件的编写方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
javascript工具库代码
Mar 29 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
Async Validator 异步验证使用说明
Jul 03 #Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 #Javascript
Require.js的基本用法详解
Jul 03 #Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 #Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 #Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 #Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 #Javascript
You might like
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
初学Python函数的笔记整理
2015/04/07 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
Django入门使用示例
2017/12/12 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
Django 用户认证组件使用详解
2019/07/23 Python
Python实现动态循环输出文字功能
2020/05/07 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
往来会计岗位职责
2013/12/19 职场文书
小学少先队活动方案
2014/02/18 职场文书
会计求职自荐信
2014/06/20 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
Python快速实现一键抠图功能的全过程
2021/06/29 Python
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技