可以自己翻译一下，这是我翻译的，参考代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
padding: 15px;
}
input {
padding: 3px 7px;
margin-bottom: 5px;
}
input.has-error {
background: #fcc;
border: 1px #f00 solid;
}
.err-msg {
margin: 0.7em 0 0;
color: #f00;
font-size: 12px;
}
.item {
padding: 15px;
margin: 0 0 10px 0;
background: #eee;
display: flex;
}
.item .title {
width: 200px;
padding: 0 20px 0 0;
}
.item .field {
flex: 1;
}
.password-strength {
width: 200px;
padding: 4px;
text-align: center;
background: #f30;
}
.password-strength1 {
background: #fa0;
}
.password-strength2 {
background: #fffa4e;
}
.password-strength3 {
background: #91ff00;
}
.password-strength4 {
background: #00f34f;
}
.form-table {
border: #ccc solid 1px;
border-right: none;
border-bottom: none;
}
.form-table th {
padding-right: 20px;
}
.form-table th, .form-table td {
border: #ccc solid 1px;
border-left: none;
border-top: none;
}
.form-table td.has-error {
background: #fcc;
}
</style>
</head>
<body>
<form id="form" @submit.prevent="validateBeforeSubmit">
<div class="item">
<div class="title">数字<br><small>可不填</small></div>
<div class="field" :class="{'has-error': errors.has('numeric')}">
<input name="_num" type="text" placeholder="请输入数字" data-vv-as="数字" data-vv-name="numeric" v-validate="'numeric'">
<p v-show="errors.has('numeric')" class="err-msg">{{ errors.first('numeric') }}</p>
</div>
</div>
<div class="item">
<div class="title">邮箱<br><small>必填</small></div>
<div class="field">
<input name="_email1" type="text" placeholder="xxx@xxx.xxx" data-vv-as="联系人邮箱" data-vv-name="email1" v-validate="'required|email|confirmed:_email2'" :class="{'has-error': errors.has('email1') }">
<input name="_email2" type="text" placeholder="xxx@xxx.xxx" data-vv-as="请在此输入一次邮箱" data-vv-name="email2" :class="{'has-error': errors.has('email1') }">
<p>
<span v-show="errors.has('email1')" class="err-msg">{{ errors.first('email1') }}</span>
</p>
<p>
<span v-show="errors.has('email1:required')" class="err-msg">邮箱必填</span>
<span v-show="errors.has('email1:email')" class="err-msg">邮箱格式不对</span>
<span v-show="errors.has('email1:confirmed')" class="err-msg">两次输入的邮箱不一致</span>
</p>
</div>
</div>
<div class="item">
<div class="title">邮编<br><small>可不填</small></div>
<div class="field" :class="{'has-error': errors.has('postal')}">
<input name="_postalcode" type="text" placeholder="xxx-xxxx" v-model="postalCode" data-vv-as="邮编" data-vv-name="postal" v-validate="'postal'">
<input type="button" value="选择邮编" :disabled="errors.has('postal')" @click="postalCodeAutoInput()"></input>
<p v-show="errors.has('postal')" class="err-msg">{{ errors.first('postal') }}</p>
<div>邮编
<select v-model="address.pref">
<option value="">选择爱好</option>
<option v-for="prefname in prefectures" :value="prefname">{{ prefname }}</option>
</select>
</div>
<div>省市区<input name="_address2" type="text" v-model="address.city"></input>
</div>
<div>街道村<input name="_address3" type="text" v-model="address.address"></input>
</div>
</div>
</div>
<div class="item">
<div class="title">电话号码<br><small>可不填</small></div>
<div class="field" :class="{'has-error': errors.has('tel')}">
<input name="_tel" type="text" placeholder="xxx-xxxx-xxxx" data-vv-as="电话号码" data-vv-name="tel" v-validate="'tel'"><br>
<p v-show="errors.has('tel')" class="err-msg">{{ errors.first('tel') }}</p>
</div>
</div>
<div class="item">
<div class="title">设置密码<br><small>可不填</small></div>
<div class="field" :class="{'has-error': errors.has('secure-password')}">
<input name="_secure_password" type="password" placeholder="请输入密码" v-model="password" data-vv-as="请输入密码" data-vv-name="secure-password" v-validate="'secure-password|min:8|max:32'">
<div class="password-strength" v-if="passwordCheck" :class="'password-strength'+passwordCheck.score">{{passwordCheck.label}}</div>
<p v-show="errors.has('secure-password')" class="err-msg">{{ errors.first('secure-password') }}</p>
</div>
</div>
<div class="item">
<div class="title">自定义<br><small>可不填</small></div>
<div class="field" :class="{'has-error': errors.has('custom')}">
<input name="_custom" type="text" placeholder="Test" data-vv-as="自定义" data-vv-name="custom" v-validate="'tel'" :class="{'has-error': errors.has('custom') }"><br>
<p v-show="errors.has('custom')" class="err-msg">{{ errors.first('custom') }}</p>
</div>
</div>
<pre>{{errors.any()}}</pre>
<button type="submit">提交</button>
</form>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/axios-0.18.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vee-validate.2.0.9.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zxcvbn.js"></script>
<script>
VeeValidate.Validator.localize("zh", {
name: "zh",
messages: {
after: function (n, e) {
return n + e[0] + "必须在后面";
},
alpha_dash: function (n) {
return n + "只能使用字母数字、-和下划线";
},
alpha_num: function (n) {
return n + "只能使用字母和数字";
},
alpha_spaces: function (n) {
return n + "只能使用字母和空格";
},
alpha: function (n) {
return n + "只能使用字母";
},
before: function (n, e) {
return n + e[0] + "必须在前面";
},
between: function (n, e) {
return n + e[0] + "必须在" + e[1] + "之间";
},
confirmed: function (n, e) {
return n + e + "不匹配";
},
credit_card: function (n) {
return n + "不正确";
},
date_between: function (n, e) {
return n + e[0] + "必须在" + e[1] + "之间";
},
date_format: function (n, e) {
return n+ "必须是这个形式" + e[0] ;
},
decimal: function (n, e) {
void 0 === e && (e = []);
var t = e[0];
return (
void 0 === t && (t = "*"),
n + "是整数或小数点以下" + ("*" === t ? "" : t) + "请用数位以内的数字");
},
digits: function (n, e) {
return n + e[0] + "必须输入数字";
},
dimensions: function (n, e) {
return n + "宽度" + e[0] + "px、高度" + e[1] + "px必须在";
},
email: function (n) {
return n + "不是有效的电子邮件地址";
},
ext: function (n) {
return n + "不是有效的文件格式";
},
image: function (n) {
return n + "不是有效的图像格式";
},
in: function (n) {
return n + "不是有效值";
},
ip: function (n) {
return n + "不是有效的IP地址";
},
max: function (n, e) {
return n + "请在" + e[0] + "个文字以内";
},
max_value: function (n, e) {
return n + "必须是" + e[0] + "以下";
},
mimes: function (n) {
return n + "不是有效的文件格式";
},
min: function (n, e) {
return n + "必须是" + e[0] + "字符以上";
},
min_value: function (n, e) {
return n + "必须是" + e[0] + "以上";
},
not_in: function (n) {
return n + "无效的值";
},
numeric: function (n) {
return n + "只能使用数字";
},
regex: function (n) {
return n + "不正确";
},
required: function (n) {
return n + "是必须填写的";
},
size: function (n, e) {
return n + "哈哈" + function (n) {
var e = 0 == (n = 1024 * Number(n)) ? 0 : Math.floor(Math.log(n) / Math.log(1024));
return 1 * (n / Math.pow(1024, e)).toFixed(2) + " " + ["Byte", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][e];
}(e[0]) + "必须在";
},
url: function (n) {
return n + "不正确";
} },
attributes: {} });
VeeValidate.Validator.extend('postal', {
getMessage: function (field) {return field + "邮编格式不对";},
validate: function (value) {return /^\d{3}-?\d{4}$/.test(value);} });
VeeValidate.Validator.extend('tel', {
getMessage: function (field) {return field + "请填写正确的手机";},
validate: function (value) {return /^0([1-9]0-?\d{4}|\d-?[1-9]\d{3}|\d[1-9]-?\d{3}|\d[1-9]\d-?\d{2}|\d[1-9]\d{2}-?\d)-?\d{4}$/.test(value);} });
VeeValidate.Validator.extend('secure-password', {
getMessage: function (field) {return field + "安全密码包含数字字母和特殊字符";},
validate: function (value) {return /^(?=.*[A-Z])(?=.*[!"#$%&'()*+,-.\/:;<=>?@\[\\\]_`{|}~]).{2,}$/.test(value);} });
VeeValidate.Validator.extend('num-hyphen', {
getMessage: function (field) {return field + "半角数字";},
validate: function (value) {return /^[\d-]+$/.test(value);} });
Vue.use(VeeValidate, {
locale: 'zh'
});
var app = new Vue({
el: "#form",
data: {
postalCode: '',
address: {
pref: '',
city: '',
address: '' },
prefectures: '安徽省,江苏省'.split(','),
password: '',
passwordLabels: '长度不够,弱,一般,很强,非常非常强'.split(','),
date: '',
},
computed: {
passwordCheck: function () {
var result = zxcvbn(this.password || '');
result.label = this.passwordLabels[result.score];
if (result.score < 3) this.errors.add('secure-password', '密码强度太弱了，请重新修改', 'weak');
return result;
} },
methods: {
validateBeforeSubmit: function () {
var a = this.passwordCheck;
console.log(a);
this.$validator.validateAll().then(function (result) {
console.log(result);
if (!result) {
alert('必填项要填');
return;
}
console.log(result);
});
},
//用于根据右边动态获取地址信息的
postalCodeAutoInput: function () {
var matches = this.postalCode.match(/^(\d{3})-?(\d{4})/);
var self = this;
axios.get('h1/' + matches[1] + '/' + matches[2] + '.json').
then(function (response) {
var data = response.data.data[0].ja;
self.address = {
pref: data.prefecture,
city: data.address1,
address: data.address2 + data.address3 };
}).
catch(function (error) {
self.errors.add('postal', '出错了', 'nomatches');
});
} } });
</script>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
