Home > Developer > Web Develop
At the end of the full stack development series, we talked about using Vue to authenticate front-ends. In that blog post, the process of how to build a vuefluentvalidator.js, and ultimately from the need (physical and physical authenticator) to direct use, it is clear that it is very small and competent for the job. (First of all, this vuefluentvalidator.js was conceived and written by me last weekend, July 15, and I started out with the hope that it would be easy to complete the verification of the form, but I didn't think of many complicated situations.) So many changes and corrections have occurred during this period.) I have uploaded it to GitHub at the moment: Https://github.com/gxqsd/vuefluentvalidator. If you have any better suggestions, we can fix them together.
Back to the point, at the end of the last article, we were able to make him run successfully. But because of the previous article too much, so haven't had time to introduce how to use.
First, let's look at an example.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Document</title> <Scripttype= "Text/javascript"src= "Vue.js"></Script> <Scriptsrc= "Vuefluentvalidator.js"></Script></Head><Body> <DivID= "box"> <formAction= "Https://www.baidu.com"> <Div> <inputtype= "text"V-model= "Model.name"> <span>{{Model.error.name}}</span> </Div> <Div> <inputtype= "text"V-model= "Model.age"> <span>{{Model.error.age}}</span> </Div> <inputtype= "Submit"value= "Submit"@click= "Submit ({ev: $event})"> </form> </Div> <Script>Let vm= NewVue ({el:'#box', Data: {validator:NewValidator ({model: {name:undefined, age:undefined , address: {home:undefined, Phone:undefine D}}, rule:function(than) {than.rulefor ("name") . Notempty (). Withmessage ("name must be filled") . Minimumlength (5) . Withmessage ("Minimum length of 5"); Than.rulefor (" Age") . Notempty (). Withmessage ("Age must") . Number (0, -) . Withmessage ("must be between the ages of 0-100");} ),}, methods: {submit:function({ev}) {if ( This. Validator.passvalidation ()) { return; } ev.preventdefault (); This. Validator.validation (Ev.target); }}, computed: {model: {get:function () { return This. Validator.model; } } } }); </Script></Body></HTML>
In this HTML page, we introduced Vue.js and vuefluentvalidator.js.
Using Vuefluentvalidator only requires a new validator in data. Validator has two parameters
The first is the data to be validated, he can be a JSON object, or an entity object ClassName, we can actually put the whole data into it. The data we pass in will be created in its internal model, which means we only need to access the data we pass through Validator.model.
The second parameter is a callback function, which is the function used to configure the validation rule.
The callback function defaults to a parameter, which is passed in when the validator is called internally, so this parameter is the validator itself.
With the parameter than of this callback function, we can configure the validation rule.
There are currently six validation rules built in. They were
Notempty non-null validation, the method has no parameters. Minimumlength Minimum length verification, with one parameter, set minimum length maximumlength maximum length verification, with one parameter, set maximum length length range validation, with 2 parameters, respectively minimum length and maximum length must Custom validation, there is a parameter, a callback function, the callback function will pass in a parameter by default Validator.model is the data that we passed in when we were in new validator. Number integer validation, with 2 parameters, the minimum and maximum values for integers, respectively. The default value is Number.minvalue and number.maxvalue Why is there no mailbox validation or something like that? Actually these things 1 is customizable, 2 is the form comes with the type= "email" is a reliable authentication. If you have any good advice, you can contact me. After each validation rule has been configured, we can set the error message via Withmessage ("Errormessaeg"). After Withmessage, you can continue to configure additional validation rules for the same field. The above is a description of how to use it after the end of the previous post. Today, I thought about this front-end verification before I wrote two articles about server-side validation, including the existence of a complex type address in the entity person public class Person {//<summary>//////</summary> public string Na me {get; set;} <summary>///</summary> public int: Age {get; set;} <summary>///gender///</summary> public bool Sex {get; set;} <summary>//////</summary> public Address {get; set;} } Public class Address { publicstringgetset;} Public string Get Set ; } }We used the Setvalidator method when we set an address validation rule for person.
Public classPersonvalidator:abstractvalidator<person> { PublicPersonvalidator () { This. Rulefor (p =p.name). Notempty (). Withmessage ("the name cannot be empty"); This. Rulefor (p =p.age). Notempty (). Withmessage ("age cannot be empty"); This. Rulefor (p =p.address). Setvalidator (Newaddressvalidator ()); } }
So if we're the object.
Model: { name:undefined, age:undefined, address: { home:undefined, phone:undefined } }Do we also want to set this up?
After I analyzed the thought in front-end JS this way is not suitable, because we omit the validator for the sake of simplicity, and if this use way will let us need to define a addressvalidator. Even if you say that we use a validator instead, it will also make the code structure into
Than.rulefor ("name") . Notempty (). Withmessage ("Name Required") . Minimumlength (5) . Withmessage ("Minimum length is 5"); Than.rulefor ("Age") . Notempty (). Withmessage ("Age must be") . Number (0, 100) . Withmessage ("Must be between 0-100 years old."); Than.rulefor ("Address"). Setvalidator (NewValidator ({model: {home:undefined, phone:undefined}, rule:function(than) {than.rulefor ("Home") . Notempty (). Withmessage ("Home address cannot be empty"); Than.rulefor ("iphone") . Notempty (). Withmessage ("Home phone cannot be empty"); } }));
I think this kind of writing is simply awful, meaning repetition and repetition. It doesn't look simple at all, even a bit of a hassle.
So I thought of another way of writing
Rulefunction(than) {than.rulefor ("Name") . Notempty (). Withmessage ("Name Required") . Minimumlength (5) . Withmessage ("Minimum length is 5"); Than.rulefor ("Age") . Notempty (). Withmessage ("Age must be") . Number (0, 100) . Withmessage ("Must be between 0-100 years old."); Than.rulefor ("Address.home") . Notempty (). Withmessage ("Home address cannot be empty"); Than.rulefor ("Address.phone") . Notempty (). Withmessage ("Home phone cannot be empty"); }
Don't we have key called address? So we're going to set the properties of the Address object directly address.propertyname is that a little bit simpler?
So I finished the vuefluentvalidator internal changes. Now I have placed him in the https://github.com/gxqsd/vuefluentvalidator you can download it to see what is different or what the problem is, so let us improve together.
5.ASP. NET full stack development using front-end verification in Vue (ii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
