from表单中这么改变vue页面中的数字变为汉字

Posted 2023-04-19

第一步，创建静态页面vtext.html，修改title显示的内容并引入vue.js，如下图所示：

第二步，在body标签元素内插入两个span元素，在第一个span绑定v-text指令，第二个span中插入message，如下图所示：

第三步，编写JS代码，绑定数据源message，如下图所示：

第四步，预览静态页面vtext.html，发现message还是一样，未变成赋的值，如下图所示：

第五步，在两个span外层添加一个div，并将第一个span的id赋给div，再在第一个span标签上绑定v-model，如下图所示：

第六步，再次预览发现页面中的message变为绑定的数据源，如下图所示： 参考技术A 双向绑定就可以啦 参考技术B 应该是editForm.DEPTNO值是number类型导致的，建议用重新定义一个model来表示

JS表单验证(长度/数字/汉字/邮箱/手机号等限制)

1、英文字母

 1 <script type="text/javascript">
 2 //验证只能是字母
 3 function checkZm(zm){ 
 4     var zmReg=/^[a-zA-Z]*$/; 
 5     if(zm!=""&&!zmReg.test(zm)){ 
 6     alert("只能是英文字母！");
 7     return false; 
 8 } 
 9 } 
10 </script>

2、汉字

 1 <input type="text" onblur="isChinese(this.value)" placeholder="请输入中文！" />
 2 <script language="javascript"> 
 3 function isChinese(obj){ 
 4     var reg=/^[\u0391-\uFFE5]+$/; 
 5     if(obj!=""&&!reg.test(obj)){ 
 6     alert(‘必须输入中文！‘);
 7     return false; 
 8     } 
 9 }
10 </script>

3、数字

 1 <script language=javascript> 
 2 //验证只能为数字 
 3 function checkNumber(obj){ 
 4     var reg = /^[0-9]+$/; 
 5     if(obj!=""&&!reg.test(obj)){ 
 6         alert(‘只能输入数字！‘); 
 7         return false; 
 8     } 
 9 } 
10 </script>

4、时间(限制不能大于当前时间)

 1 <script type="text/javascript">
 2 //检验时间大小(与当前时间比较) 
 3 function checkDate(obj){ 
 4 var obj_value=obj.replace(/-/g,"/");//替换字符，变成标准格式(检验格式为：‘2009-12-10‘) 
 5 // var obj_value=obj.replace("-","/");//替换字符，变成标准格式(检验格式为：‘2010-12-10 11:12‘) 
 6 var date1=new Date(Date.parse(obj_value)); 
 7 var date2=new Date();//取今天的日期 
 8 if(date1>date2){ 
 9     alert("不能大于当前时间！"); 
10     return false; 
11     } 
12 } 
13 </script>

5、空值

 1 <script language="javascript"> 
 2 function CheckForm(obj) 
 3 { 
 4     if (obj.length == 0) { 
 5     alert("姓名不能为空!"); 
 6     return false; 
 7 } 
 8 return true; 
 9 alert("姓名不能为空!"); 
10 } 
11 </script>

6、邮箱

 1 <script language="javascript">
 2 function test(obj){
 3 //对电子邮件的验证
 4 var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9][email protected]([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
 5 if(!myreg.test(obj))
 6 {
 7     alert(‘请输入有效的邮箱！‘);
 8     return false;
 9 }
10 }
11 </script>

7、手机号

 1 <script type="text/javascript">
 2 function validatemobile(mobile) { 
 3     if(mobile.length==0) { 
 4     alert(‘手机号码不能为空！‘);
 5     return false; 
 6     } 
 7 if(mobile.length!=11) { 
 8     alert(‘请输入有效的手机号码，需是11位！‘);
 9     return false; 
10     } 
11 
12 var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
13 if(!myreg.test(mobile)) { 
14     alert(‘请输入有效的手机号码！‘); 
15     return false; 
16     } 
17 } 
18 </script>

8、身份证号

  1 <script type="text/javascript">
  2 // 构造函数，变量为15位或者18位的身份证号码
  3 function clsIDCard(CardNo) {
  4 this.Valid=false;
  5 this.ID15=‘‘;
  6 this.ID18=‘‘;
  7 this.Local=‘‘;
  8 if(CardNo!=null)this.SetCardNo(CardNo);
  9 }
 10 
 11 // 设置身份证号码，15位或者18位
 12 clsIDCard.prototype.SetCardNo = function(CardNo) {
 13 this.ID15=‘‘;
 14 this.ID18=‘‘;
 15 this.Local=‘‘;
 16 CardNo=CardNo.replace(" ","");
 17 var strCardNo;
 18 if(CardNo.length==18) {
 19 pattern= /^\d{17}(\d|x|X)$/;
 20 if (pattern.exec(CardNo)==null)return;
 21 strCardNo=CardNo.toUpperCase();
 22 } else {
 23 pattern= /^\d{15}$/;
 24 if (pattern.exec(CardNo)==null)return;
 25 strCardNo=CardNo.substr(0,6)+‘19‘+CardNo.substr(6,9)
 26 strCardNo+=this.GetVCode(strCardNo);
 27 }
 28 this.Valid=this.CheckValid(strCardNo);
 29 }
 30 
 31 // 校验身份证有效性
 32 clsIDCard.prototype.IsValid = function() {
 33 return this.Valid;
 34 }
 35 
 36 // 返回生日字符串，格式如下，1981-10-10
 37 clsIDCard.prototype.GetBirthDate = function() {
 38 var BirthDate=‘‘;
 39 if(this.Valid)BirthDate=this.GetBirthYear()+‘-‘+this.GetBirthMonth()+‘-‘+this.GetBirthDay();
 40 return BirthDate;
 41 }
 42 
 43 // 返回生日中的年，格式如下，1981
 44 clsIDCard.prototype.GetBirthYear = function() {
 45 var BirthYear=‘‘;
 46 if(this.Valid)BirthYear=this.ID18.substr(6,4);
 47 return BirthYear;
 48 }
 49 
 50 // 返回生日中的月，格式如下，10
 51 clsIDCard.prototype.GetBirthMonth = function() {
 52 var BirthMonth=‘‘;
 53 if(this.Valid)BirthMonth=this.ID18.substr(10,2);
 54 if(BirthMonth.charAt(0)==‘0‘)BirthMonth=BirthMonth.charAt(1);
 55 return BirthMonth;
 56 }
 57 
 58 // 返回生日中的日，格式如下，10
 59 clsIDCard.prototype.GetBirthDay = function() {
 60 var BirthDay=‘‘;
 61 if(this.Valid)BirthDay=this.ID18.substr(12,2);
 62 return BirthDay;
 63 }
 64 
 65 // 返回性别，1：男，0：女
 66 clsIDCard.prototype.GetSex = function() {
 67 var Sex=‘‘;
 68 if(this.Valid)Sex=this.ID18.charAt(16)%2;
 69 return Sex;
 70 }
 71 
 72 // 返回15位身份证号码
 73 clsIDCard.prototype.Get15 = function() {
 74 var ID15=‘‘;
 75 if(this.Valid)ID15=this.ID15;
 76 return ID15;
 77 }
 78 
 79 // 返回18位身份证号码
 80 clsIDCard.prototype.Get18 = function() {
 81 var ID18=‘‘;
 82 if(this.Valid)ID18=this.ID18;
 83 return ID18;
 84 }
 85 
 86 // 返回所在省，例如：上海市、浙江省
 87 clsIDCard.prototype.GetLocal = function() {
 88 var Local=‘‘;
 89 if(this.Valid)Local=this.Local;
 90 return Local;
 91 }
 92 
 93 clsIDCard.prototype.GetVCode = function(CardNo17) {
 94 var Wi = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
 95 var Ai = new Array(‘1‘,‘0‘,‘X‘,‘9‘,‘8‘,‘7‘,‘6‘,‘5‘,‘4‘,‘3‘,‘2‘);
 96 var cardNoSum = 0;
 97 for (var i=0; i<CardNo17.length; i++)cardNoSum+=CardNo17.charAt(i)*Wi[i];
 98 var seq = cardNoSum%11;
 99 return Ai[seq];
100 }
101 
102 clsIDCard.prototype.CheckValid = function(CardNo18) {
103 if(this.GetVCode(CardNo18.substr(0,17))!=CardNo18.charAt(17))return false;
104 if(!this.IsDate(CardNo18.substr(6,8)))return false;
105 var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
106 if(aCity[parseInt(CardNo18.substr(0,2))]==null)return false;
107 this.ID18=CardNo18;
108 this.ID15=CardNo18.substr(0,6)+CardNo18.substr(8,9);
109 this.Local=aCity[parseInt(CardNo18.substr(0,2))];
110 return true;
111 }
112 
113 clsIDCard.prototype.IsDate = function(strDate) {
114 var r = strDate.match(/^(\d{1,4})(\d{1,2})(\d{1,2})$/);
115 if(r==null)return false;
116 var d= new Date(r[1], r[2]-1, r[3]);
117 return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[2]&&d.getDate()==r[3]);
118 }
119 
120 
121 function valiIdCard(idCard){
122 var checkFlag = new clsIDCard(idCard);
123 if (!checkFlag.IsValid()) {
124 alert("输入的身份证号无效,请输入真实的身份证号！");
125 document.getElementByIdx("idCard").focus();
126 return false;
127 }else{
128 alert("是有效身份证！");
129 }
130 }
131 </script>