Vue-validator is a form verification plug-in for your reference. The specific content is as follows
Vue version: 1.0.24
Vue-validator version: 2.1.3
Basic use
<div >
<validator name="validation">
<form novalidate>
<div class="username-field">
<label for="username">username:</label>
<input type="text" v-validate:username="['required']" />
</div>
<div class="comment-filed">
<label for="comment">comment:</label>
<input type="text" v-validate:comment="{maxlength: 256}" />
</div>
<div class="errors">
<p v-if="$">Please enter your name</p>
<p v-if="$">Your comment is too long</p>
</div>
<input type="submit" value="send" v-if="$" />
</form>
</validator>
</div>
<script src="///vue/1.0.24/" type="text/javascript" charset="utf-8"></script>
<script src="///vue-validator/2.1.3/" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app'
});
</script>
The form to be validated is wrapped in the validator custom element directive, and the corresponding verification rules are bound to the v-validate property of the form control element to be validated.
The verification results are saved under the $validation property of the component instance. $validation is a component composed of the validator element and the name attribute and the $ prefix
Verify the result structure
{
// Overall verification of the form "valid": false, // Field verification is passed "invalid": true, // valid "touched": false, // Return true when the element where the verification field is located is obtained by passing the focus, otherwise return false "untouched": true, // touched "modified": false, // Return true when the element value is different from the initial value, otherwise return false "dirty": false, // Return true after changing the field value at least once, otherwise return false "pristine": true, // dirty reverse // Field single verification "username": {
"required": true,
"modified": false,
"pristine": true,
"dirty": false,
"untouched": true,
"touched": false,
"invalid": true,
"valid": false
},
"comment": {
"maxlength": false,
"modified": false,
"pristine": true,
"dirty": false,
"untouched": true,
"touched": false,
"invalid": false,
"valid": true
}
}
The verification result consists of two parts. The form overall verification result and the single field verification result.
Verifier syntax
v-validate directive syntax:
v-validate[:field]=”array literal | object literfal | binding”
Verify field name field
field is used to identify the verification field, and then the verification result can be referenced by this field.
The v-validate directive is used to define verification rules, and its values can be array literals, object literals, and component instance array attribute names.
Array literals
When the verifier does not require additional parameters, you can use array literal form, such as required verifier. As long as it appears, the element where the verifier is located is a required item.
<div >
<validator name="validation">
<form novalidate>
Zip: <input type="text" v-validate:zip="['required']" /><br />
<div>
<span v-if="$">Postal code is required</span>
</div>
</form>
</validator>
</div>
Object literal
Object literal syntax is suitable for validators that require additional parameters. For example, the minlength of the verifier that limits the input length, it is necessary to specify the limit length.
<div >
<validator name="validation">
<form novalidate>
ID: <input type="text" v-validate: />
<br />
<div>
<p v-if="$">IDCan't be empty</p>
<p v-if="$">yourIDThe name is too short</p>
<p v-if="$">yourIDToo long name</p>
</div>
<input type="submit" value="send" v-if="$" />
</form>
</validator>
</div>
You can also use the object literal syntax to customize the verification rules through the rule field.
<div >
<validator name="validation">
<form novalidate>
ID: <input type="text" v-validate: />
<br />
<div>
<p v-if="$">IDCan't be empty</p>
<p v-if="$">yourIDThe name is too short</p>
<p v-if="$">yourIDToo long name</p>
</div>
<input type="submit" value="send" v-if="$" />
</form>
</validator>
</div>
Instance data properties
The value of v-validate can be a data attribute of the component instance. This can be used to dynamically bind verification rules.
<div >
<validator name="validation">
<form novalidate>
ID: <input type="text" v-validate: /><br />
<div>
<p v-if="$">Can't be empty</p>
<p v-if="$">yourIDToo short</p>
<p v-if="$">yourIDToo long</p>
</div>
</form>
</validator>
</div>
<script src="///vue/1.0.24/" type="text/javascript" charset="utf-8"></script>
<script src="///vue-validator/2.1.3/" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
rules: {
required: true,
minlength: 3,
maxlength: 16
}
}
});
</script>
Built-in verification rules
vue-validator has some commonly used verification rules built in:
- required — The input value cannot be empty
- pattern — Must match the regular expression represented by pattern
- minlength — The length of the input value cannot be less than the value represented by minlength
- maxlength — The input value cannot be greater than the value represented by maxlength
- min — The input value cannot be less than the value represented by min
- max — The input value cannot be greater than the value represented by max
Used simultaneously with v-model
vue-validator will automatically verify the value dynamically set by v-model.
<div >
<validator name="validation">
<form novalidate>
message: <input type="text" v-model="msg" v-validate:message="{required: ture, minlength: 8}" />
<br />
<p v-if="$">messageCan't be empty</p>
<p v-if="$">messageEnter too long number of digits</p>
</form>
</validator>
</div>
<script src="///vue/1.0.24/" type="text/javascript" charset="utf-8"></script>
<script src="///vue-validator/2.1.3/" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: ''
}
});
setTimeout(function () {
= 'hello world!';
}, 2000);
</script>
Reset the verification result
Dynamically reset the verification result by calling the $resetValidation(); method on the Vue component instance.
<div >
<validator name="validation">
<form novalidate>
<div class="username-field">
<label for="username">username:</label>
<input type="text" v-validate:username="['required']" />
</div>
<div class="comment-filed">
<label for="comment">comment:</label>
<input type="text" v-validate:comment="{maxlength: 256}" />
</div>
<div class="errors">
<p v-if="$">Username cannot be empty</p>
<p v-if="$">Enter text more than256indivual</p>
<input type="submit" value="send" v-if="$" />
<button type="button" @click="onReset">Reset Validation</button>
</div>
<pre>{{$validation | json}}</pre>
</form>
</validator>
</div>
<script src="///vue/1.0.24/" type="text/javascript" charset="utf-8"></script>
<script src="///vue-validator/2.1.3/" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app',
methods: {
onReset: function () {
this.$resetValidation();
}
}
});
</script>
Checkbox
<div >
<validator name="validation">
<form novalidate>
<h1>investigation</h1>
<fieldset>
<legend>Please select fruit</legend>
<input type="checkbox" value="apple" v-validate:fruits="{
required: { rule: true, message: requiredErrorMsg },
minlength: { rule: 1, message: minlengthErrorMsg },
maxlength: { rule: 2, message: maxlengthErrorMsg }
}" />
<label for="apple">Apple</label>
<input type="checkbox" value="orange" v-validate:fruits />
<label for="orange">Orange</label>
<input type="checkbox" value="grape" v-validate:fruits />
<label for="grape">Grape</label>
<input type="checkbox" value="banana" v-validate:fruits />
<label for="banana">Banana</label>
<ul class="errors">
<li v-for="msg in $">
<p>{{msg | json}}</p>
</li>
</ul>
</fieldset>
</form>
</validator>
</div>
<script src="///vue/1.0.24/" type="text/javascript" charset="utf-8"></script>
<script src="///vue-validator/2.1.3/" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app',
computed: {
requiredErrorMsg: function () {
return 'Please select fruit';
},
minlengthErrorMsg: function () {
return 'Please select at least 1 fruit!';
},
maxlengthErrorMsg: function () {
return 'Please select up to 2 fruits!';
}
}
});
</script>
drop-down class table select
<div >
<validator name="validation">
<form novalidate>
<select v-validate:lang="{required: true}">
<option value="">Please select a language</option>
<option value="javascript">javascript</option>
<option value="php">php</option>
<option value="node">node</option>
</select>
<div class="errors">
<p v-if="$">Can't be empty！</p>
</div>
</form>
</validator>
</div>
<script src="///vue/1.0.24/" type="text/javascript" charset="utf-8"></script>
<script src="///vue-validator/2.1.3/" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app'
});
</script>
Check status class
Each verification state has its corresponding class (default). You can also customize the verification state class.
<validator name="validation" :classes="{touched: 'touehc-validator', dirty: 'dirty-validator'}">
<label for="username">username</label>
<<input type="text" :classes="{valid: 'valid-username', invalid: 'invalid-username'}" v-validate:username="{required: {rule: true, message: 'required you name!'}}">
</validator>
<!-- classesAttributes can only bevalidatorElement or appliedv-validateUsed on elements that are valid -->
Group verification
vue-validator supports group verification. For example, the repeat password function.
<div >
<validator name="validation" :groups="['passwordGroup']">
<form novalidate>
username: <input type="text" v-validate:username="['required']" /><br />
password: <input type="password" v-validate:password="{ minlength: 8, required: true }" group="passwordGroup" /><br />
comfirm password: <input type="password" v-validate:password-comfirm="{minlength: 8, required: true}" group="passwordGroup" />
<div class="errors">
<p v-if="$">Username cannot be empty</p>
<p v-if="$">Password cannot be empty</p>
<p v-if="$">The password must not be less than8Bit</p>
<p v-if="$">重复Password cannot be empty</p>
<p v-if="$">The password must not be less than8Bit</p>
<p v-if="$">Passwords are inconsistent</p>
</div>
</form>
</validator>
</div>
<script src="///vue/1.0.24/" type="text/javascript" charset="utf-8"></script>
<script src="///vue-validator/2.1.3/" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app'
});
</script>
This article has been compiled intoFront-end component learning tutorial》, everyone is welcome to learn and read.
Regarding the tutorial on components, please click on the topicComponent learning tutorialCarry out learning.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.