基于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 相关文章推荐
javascript 表单的友好用户体现
Jan 07 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
javascript轮播图算法
Oct 21 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
微信小程序选择图片控件
Jan 19 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
wxpython学习笔记(推荐查看)
2014/06/09 Python
python运行时间的几种方法
2016/06/17 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
浅谈对yield的初步理解
2017/05/29 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
python实现顺序表的简单代码
2018/09/28 Python
Python面向对象之Web静态服务器
2019/09/03 Python
详解python程序中的多任务
2020/09/16 Python
python调用百度API实现人脸识别
2020/11/17 Python
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
党日活动总结
2014/05/07 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
Python OpenCV快速入门教程
2021/04/17 Python