Form verification method and communication method

Abstract

The application discloses a form verification method and a communication method, specifically comprising the following steps: creating a custom class, defining a class constructor in the custom class; defining a method in the custom class, returning a set of verification rules according to received parameters; creating a custom instruction, binding to a form node, setting the rules attribute of the form node, setting the label attribute of the form node, and adding a style adjustment function as required; in the install method of a Vue application, binding the custom instruction and the custom class to a Vue instance; and editing verification rules by using the custom instruction. The application dynamically generates verification rules by using a custom class, does not need to write the same trigger rule and other redundant codes for each form, and dynamically binds the verification rules to the rules attribute of a form item by skillfully using a custom instruction of the Vue, so that the verification can be directly operated on a node, and it is not necessary to configure the verification in a js code.

Description

Technical Field

[0001] This invention relates to the field of form validation, and in particular to a form validation method and a communication method. Background Technology

[0002] ElementPlus, a top-ten UI component library on GitHub, provides the tools and components needed to build and extend web applications. Its rich and diverse components greatly meet the page requirements of web development, and its consistent, responsive, efficient, and controllable design principles, along with clear documentation, have made it a favorite among developers.

[0003] ElementPlus's form validators are implemented using async-validator. async-validator is a convenient and easy-to-use data validator whose basic usage involves defining descriptors, assigning them to schemas, and passing the objects to be validated and callback functions to the schema methods. ElementPlus implements form validation by binding validation rules to specific variables.

[0004] However, when using ElementPlus to implement form validation, each form item requires a separate validation rule. For data that is only required, a lot of the same validation code needs to be written, resulting in a high code duplication rate. When validation error messages need to be internationalized, a lot of repetitive internationalization code needs to be written, making the code overly redundant. Moreover, when there is a need to modify the validation, the corresponding field needs to be found in the JS code and modified. It would be much more convenient for developers to directly modify the corresponding validation in the form node. Summary of the Invention

[0005] Purpose of the invention: To provide a form validation method and a communication method to solve the above-mentioned problems existing in the prior art.

[0006] Technical solution: A form validation method, comprising the following steps: S1. Create a custom class to store and process validation rules. Define a class constructor in the custom class, accept parameters, and define the validation logic and error messages for specific fields. S2. Define a method in a custom class that returns a set of validation rules based on the received parameters; S3. Create custom instructions, bind them to form nodes, dynamically obtain the field titles on the form nodes, set them as the rules attribute of the form nodes, set the tag attributes of the form nodes, and add style adjustment functions as needed. S4. In the install method of the Vue application, bind the custom directive and custom class to the Vue instance; S5. Edit the verification rules using the custom instructions.

[0007] According to one aspect of this application, step S1 specifically comprises: S11. Create a custom class and define a class constructor in the custom class that accepts parameters, including field name, field title, trigger mode, required flags, minimum length, maximum length, regular expression, error message and internationalization function; S12. Define the class attribute for storing the array of validation rules.

[0008] According to one aspect of this application, step S2 specifically comprises: S21. Create an instance of the custom class based on the name of the custom class and an object containing the class constructor parameters; S22. Call the getRules method of the instance to obtain the array of verification rules based on the received parameters; S23. Return a set of verification rules based on the obtained array of verification rules.

[0009] According to one aspect of this application, step S3 specifically comprises: S31. Create a custom instruction, which has one parameter and one value; the parameter is the name of the custom class, and the value is an object containing the parameters of the class constructor. S32. Call the bind hook function and the update hook function, and create an instance of the custom class using the parameters and values ​​in the function; S33. Call the getRules method of the instance to obtain the array of verification rules; S34. Set the rules property of the form node to the obtained array of validation rules, set the label property of the form node to the field title, and add a red asterisk to the field title if the required property of the form node is true. S35. Return to the form node with the properties set.

[0010] According to one aspect of this application, step S4 specifically comprises: S41. Define the installation method for Vue applications; S42. Use the directive method of a Vue instance to register custom directives globally; S43. Use the prototype property of the Vue instance to globally attach custom classes; S44. Return the Vue instance that has registered custom directives and attached custom classes, and enter it into the installation method of the Vue application.

[0011] According to one aspect of this application, step S5 specifically comprises: S51. Edit validation rules using custom directives on form nodes; S52. Repeat step S51 for each form node that requires validation rules; S53. Return to the edited verification rules.

[0012] According to one aspect of this application, step S5 also includes displaying and handling errors using the VeeValidate component and functions.

[0013] According to one aspect of this application, it also includes adding a method to the custom class in step S2 to obtain error messages in different language environments.

[0014] According to one aspect of this application, it also includes introducing an internationalization plugin in a Vue application, integrating the internationalization plugin with custom classes and custom directives.

[0015] According to one aspect of this application, a communication method for a satellite terminal is also included, comprising the following steps: Sa, open a web browser and send an HTTP request to the web server; The Sb and Web server receive the HTTP request and generate an HTML document based on the Web interface; The web browser receives an HTML document, the user enters data in the HTML document, and the client uses the form validation method to validate the data and provide immediate feedback. Sd, the network server receives the input data and performs verification on the server side using the form verification method described above; The Se satellite communication system receives verified data from the network server, converts the verified data, and performs communication services. The Sf network server receives converted data from the satellite communication system and processes it according to the terminal's functions and characteristics.

[0016] Beneficial effects: This invention uses custom classes to dynamically generate validation rules, eliminating the need to write redundant code such as identical trigger rules for each form. By using Vue's custom directives to dynamically bind validation rules to the `rules` property of form items, operations can be performed directly at the node level without configuring validation in the JavaScript code. In addition to retrieving the form node, it also supports custom titles and custom error messages, providing greater configurability for developers. The class includes style adjustments for required fields, which helps to unify form styles across projects. Batch organization of internationalization within the same class facilitates internationalization maintenance. Attached Figure Description

[0017] Figure 1 This is a basic information graph for the class.

[0018] Figure 2 This is an illustration of the verification rules.

[0019] Figure 3 This is a diagram illustrating the usage of form validation methods. Detailed Implementation

[0020] async-validator is a convenient and easy-to-use data validator. Its basic usage includes defining descriptors, assigning them to schemas, and passing the objects to be validated and callback functions to the schema methods. In ElementPlus, form validation is achieved by binding validation rules to specific variables.

[0021] Based on this, this application proposes a form validation method, which specifically includes the following steps: S1. Create a custom class to store and process validation rules. Define a class constructor in the custom class, accept parameters, and define the validation logic and error messages for specific fields.

[0022] S2. Define a method in a custom class that returns a set of validation rules based on the received parameters.

[0023] S3. Create custom instructions, bind them to form nodes, dynamically obtain the field titles on the form nodes, set them as the rules attribute of the form nodes, set the tag attributes of the form nodes, and add style adjustment functions as needed.

[0024] S4. In the install method of the Vue application, bind the custom directive and custom class to the Vue instance.

[0025] S5. Edit the verification rules using the custom instructions.

[0026] Furthermore, the methods in the custom class iterate over the parameters and add the corresponding validation rules to the array. If the required flag is true, a rule is added to check if the field value is empty; if a minimum and maximum length are specified, a rule is added to check if the field value is within the range; if a regular expression is specified, a rule is added to check if the field value matches the pattern; if an error message is specified, it is used as the message attribute of the rule; if an internationalization function is specified, it is used to transform the message attribute of the rule.

[0027] In the steps above, by using custom classes and directives to dynamically generate and bind validation rules, code redundancy can be reduced and development efficiency improved. By binding custom directives and custom classes to the Vue instance, they can be used globally in any component.

[0028] According to one aspect of this application, step S1 is further comprising: S11. Create a custom class and define a class constructor in the custom class that accepts parameters, including field name, field title, trigger mode, required flags, minimum length, maximum length, regular expression, error message, and internationalization function. These parameters are used to define the validation logic and error message for the given field.

[0029] S12. Define a class property for storing the array of validation rules. This array is initially empty and will be filled by class methods.

[0030] According to one aspect of this application, step S2 further comprises: S21. Create an instance of the custom class based on the name of the custom class and an object containing the class constructor parameters; S22. Call the getRules method of the instance to obtain the array of verification rules based on the received parameters; S23. Return a set of verification rules based on the obtained array of verification rules.

[0031] According to one aspect of this application, step S3 further comprises: S31. Create a custom instruction, which has one parameter and one value; the parameter is the name of the custom class, and the value is an object containing the parameters of the class constructor. S32. Call the bind hook function and the update hook function, and create an instance of the custom class using the parameters and values ​​in the function; S33. Call the getRules method of the instance to obtain the array of verification rules; S34. Set the rules property of the form node to the obtained array of validation rules, set the label property of the form node to the field title, and add a red asterisk to the field title if the required property of the form node is true. S35. Return to the form node with the properties set.

[0032] According to one aspect of this application, step S4 further comprises: S41. Define the installation method for Vue applications; S42. Use the directive method of a Vue instance to register custom directives globally; S43. Use the prototype property of the Vue instance to globally attach custom classes; S44. Return the Vue instance that has registered custom directives and attached custom classes, and enter it into the installation method of the Vue application.

[0033] According to one aspect of this application, step S5 further comprises: S51. Edit validation rules using custom directives on form nodes; S52. Repeat step S51 for each form node that requires validation rules; S53. Return to the edited verification rules.

[0034] In a further embodiment, it is necessary to validate the required username field, with a minimum length of 6 and a maximum length of 20, and to match a specific pattern. The following code can be used: <code><el-form-item v-validate:Username="{field:'username',title:'Username',trigger:'blur',required:true,min:6,max:20,pattern: / ^[a-zA-Z0-9_]+$ / ,message:'Invalid username'}"><el-input v-model="form.username" / >< / code> .

[0035] In further embodiments, the method also includes displaying and handling errors using the VeeValidate component and functions. VeeValidate provides rich functionality for handling form validation, including validating multiple fields at once or performing cross-field validation. Specifically: Users fill in form data in a Vue application and submit it to the backend server; You can use custom directives to bind VeeValidate validation rules to form nodes. These rules can be returned by methods in a custom class or defined directly in the directive. When a user submits a form, VeeValidate automatically triggers the validation process; VeeValidate validates the form data according to the validation rules defined in the directive. If any field does not conform to the rules, an error will be triggered. Error messages will be stored in an error object provided by VeeValidate, and can be retrieved by accessing this object; In Vue templates, you can use components provided by VeeValidate (such as ` <validationprovider>These components, which display and handle error messages, can be used with form fields and styled as needed. When a user enters data that does not conform to the rules, VeeValidate will immediately display the corresponding error message. These messages can be predefined default messages or error messages for specific fields defined in a custom class. Using functions provided by VeeValidate (such as `validate()`) to manually trigger the validation process and obtain the validation results is very useful for validating multiple fields at once or performing cross-field validation.

[0036] By using the VeeValidate component and functions to display and handle errors, it offers rich functionality and flexibility to meet various form validation needs and provide a good user experience.

[0037] In a further embodiment, a method is added to the custom class to retrieve error messages for different language environments. For example, `getErrorMessage()` retrieves the error message for the corresponding language environment based on the passed-in language environment parameter. When editing validation rules using custom directives, only the corresponding language environment parameter needs to be passed to obtain the appropriate error message. In this way, validation rules and error messages can be decoupled from the specific internationalization implementation. Developers only need to maintain a unified set of validation rules and error messages in the custom class and retrieve the corresponding error messages by passing in different language environment parameters. This avoids writing a lot of repetitive internationalization code and allows for better management and maintenance of validation rules and error messages.

[0038] In a further embodiment, an internationalization plugin is introduced into the Vue application, which is then integrated with custom classes and custom directives to achieve more comprehensive and flexible multilingual internationalization configuration, including the validation of error messages.

[0039] Satellite communication terminals use a web interface, a web server that hosts the web-based interface and communicates with the satellite communication system, and a web browser that is used to access the web-based interface and display the terminal's functions and features, and provides communication services to the web server and web browser.

[0040] The form validation method of this application is applied to a communication method for satellite terminals, and the specific steps are as follows: Sa, open a web browser and send an HTTP request to the web server.

[0041] The user opens a web browser and enters the URL of the web server hosting the web-based interface.

[0042] The Sb and Web server receive the HTTP request and generate an HTML document based on the Web interface.

[0043] HTML documents also include references to CSS, JavaScript, and other resources needed to render and interact with a web-based interface, which a web browser receives and displays on the screen.

[0044] The web browser receives an HTML document, the user enters data in the HTML document, and the client uses the form validation method to validate the data and provide immediate feedback.

[0045] Users interact with web-based interfaces, such as entering data, clicking buttons, and selecting options. Web-based interfaces use JavaScript to process user input and perform validation logic on the client side. They also use web sockets, RESTful APIs, or other methods to communicate with web servers and exchange data.

[0046] Sd, the network server receives the input data and performs validation on the server side using the form validation method.

[0047] The web server also uses TCP / IP, UDP, or other protocols to communicate with and exchange data with the satellite communication system.

[0048] The Se satellite communication system receives verified data from the network server, converts the verified data, and executes communication services.

[0049] For example, voice, data, or other types of services. Satellite communication systems also use TCP / IP, UDP, or other protocols to communicate with web servers and exchange data.

[0050] The Sf network server receives converted data from the satellite communication system and processes it according to the terminal's functions and characteristics.

[0051] Web servers also use Web sockets, RESTful APIs, or other methods to communicate with and exchange data with web-based interfaces. Web-based interfaces receive data from web servers and display it on the screen. Web-based interfaces also use JavaScript to handle data changes and update UI elements.

[0052] By using a web-based interface accessible through a web browser, the cost and complexity of developing and maintaining terminal software and hardware can be reduced. Utilizing front-end technologies widely supported by web browsers, such as HTML, CSS, and JavaScript, the accessibility and compatibility of terminal functions and features across different devices and platforms can be improved. User experience and satisfaction can be enhanced by providing a modern responsive design that adapts to different screen sizes and resolutions, and by using WebSockets, RESTful APIs, or other methods that support real-time and bidirectional communication between web servers and applications. Furthermore, data transmission between web servers and web browsers can be protected through encryption and authentication protocols, and validation logic can be used on both the client and server sides to prevent invalid or unauthorized data, thereby improving the security and reliability of terminal data and preventing malicious data input.

[0053] In a further embodiment, the front-end technology is optimized and improved using a neural network model of TFT, an attention-based multilevel prediction model. TFT can handle different types of inputs, such as static covariates, known future inputs, and unknown future inputs, and fuses them together using a gated residual network. TFT can also use self-attention and multi-head attention mechanisms to capture the temporal dependencies and correlations of different time steps and features. TFT can provide interpretable predictions by using variable selection networks and temporal variable importance analysis. The specific steps are as follows: Prepare TFT data. The data consists of three parts: the target variable, i.e., the variable to be predicted; static covariates, i.e., variables that do not change over time; and time-varying covariates, i.e., variables that change over time. Time-varying covariates can be further divided into known future inputs (i.e., variables known in advance within the prediction range) and unknown future inputs (i.e., variables unknown in advance within the prediction range).

[0054] The TFT is trained based on data. The TFT consists of three main components: an encoder, a decoder, and an output layer. The encoder takes the target variable and time-varying covariates as input and applies a series of processing steps (e.g., embedding, gating, attention, and fusion) to generate a latent representation of the input sequence. The decoder takes the latent representation and known future inputs as input and applies a series of similar processing steps to generate a predicted sequence. The output layer takes the predicted sequence as input and applies a linear transformation to produce the final output.

[0055] TFTs can be used to make predictions for web-based interfaces. TFTs can predict multiple time steps and multiple output dimensions. For example, to predict the communication quality and bandwidth of a satellite communication terminal over the next 24 hours, a 24×2 prediction matrix can be generated using TFTs. TFTs can also be used to provide confidence intervals or quantiles of the predictions through a probability output layer.

[0056] TFTs can be used to enhance the interpretability of web-based interfaces. TFTs can provide interpretability by using variable selection networks (VINs), which learn to select or deselect different input features based on their predictive relevance, and time-varying importance analysis (TVA), which measures the contribution of each input feature to the prediction at each time step. These methods can be used to display on a web-based interface which input features are most important or relevant to the prediction.

[0057] In further embodiments, the form validation method of this application can also use TypeScript to create custom classes, providing more powerful type checking and code hints, increasing code maintainability and readability; use decorators to define validation rules and error messages, and decorators can add metadata to class properties to dynamically obtain validation rules and error messages at runtime; use Vue3, leveraging its new features such as Teleport and Slots to implement more advanced style adjustment functions; and use CSS-in-JS libraries (such as styled-components or Emotion) to dynamically generate styles and apply them to form nodes, thus achieving more flexible, reusable, and dynamic style adjustment functions.

[0058] like Figure 1-2 As shown, the specific implementation of validation rule data using a declaratively defined class is as follows: Defined variables: Value: Used to store the final verification rules. labelV: Field Title triggerV: Form item trigger methods: blur, change DEFAULTMSG: The default error message for validation rules, which can generate different content based on internationalization. Defined method: Label(label: string): Modifies the validation field title based on the passed parameters. Trigger(trigger:'blur'|'change'|string[]): The default value is blur, which can be modified according to the passed-in trigger event parameter. Required(msg:string=DEFAULTMSG.required): Binds required field validation. `Type(type:'string'|'number'|'boolean'|'regexp'|'integer'|'float'|'array'|'object'|'date'|'url'|'hex'|'email',msg:string=DEFAULTMSG.type)`: Handles validation for different data types based on the passed parameters, such as numeric, date, email, etc. regexp(pattern:RegExp,msg:string): Performs regular expression validation based on the passed-in regular expression. min(min:number,msg:string=DEFAULTMSG.min): Performs a minimum value check based on the input minimum value. `max(max: number, msg: string=DEFAULTMSG.max)`: Performs a maximum value check based on the input maximum value. minmax(min:number, max:number, msg:string=DEFAULTMSG.minmax): Performs range validation based on the maximum and minimum values ​​passed in. len(len:number,msg:string=DEFAULTMSG.len): Performs data length validation based on the input length. `enum(enumVal:any,msg:string=DEFAULTMSG.enum)`: Performs enumeration value validation based on the passed enumeration value data. `whitespace(msg:string=DEFAULTMSG.whitespace)`: Validates whitespace data. validator(validatorFn:any): Custom validation function By default, all the methods above return `this`, allowing subsequent methods to directly access the current instance for data processing. getValue(): Retrieves the generated array of validation rules. This function replaces all field titles, maximum and minimum values, and other parameters in the error messages. In a further embodiment, a custom directive is bound. A custom directive is defined by an object containing a component lifecycle hook. The hook function receives the element to which the directive is bound as its parameter. The specific steps are as follows: The `install` method is exposed by `export default`, where `install` receives the parameter `app` as a Vue instance. In the install method, the app binds to the global variable rule method, which returns the class defined in A; The app binds a custom directive `validate` and dynamically retrieves the field titles from the form item nodes using the method `(vnode.ref as any).i.props.rules=binding.value.label((vnode.ref as any).i.props.label).getValue()`, while simultaneously setting the `rules` attribute for the node. The app binds a custom directive, `required`, and dynamically sets attributes for nodes using the same method as described above. In the `setRequiredStyle` method, parameters are passed to the current DOM node to set the required styles.

[0059] like Figure 3 As shown, in a further embodiment, when there is only a single required field validation, `v-required` is bound to the Vue form node, and the parameter is passed in using the `v-validate` custom directive. This parameter is used to generate validation rules using the `rule` class for binding. When required field validation is needed, use `v-validate="rule().required()"`; when built-in function validation is needed, use `v-validate="rule().min(5)"` to set the minimum value validation. Multiple built-in function validations can be bound using the above example; when custom validation is needed, use `v-validate="rule().validator(validateFn)"`, where you can customize the validation logic in the `validateFn` function.

[0060] Alternatively, parameters can be bound directly to the rules on the form item node. The label() and getValue() functions can be used to customize the bound field title and return value. When required field validation is needed, use rule="rule().required().label('name').getValue()", customize the title content through the label method, and getValue to retrieve the generated rules. When built-in function validation is needed, use rule="rule().max(5).label('name').getValue()", set the validation through the built-in function max().

[0061] In a further embodiment, to implement the basic information form validation content, variables need to be defined according to the native validator, as shown below: rules={ name:[{required:true,message:'Please enter your name',trigger:'blur'}], age:[{required:true,message:'Please enter your age',type:'number',trigger:'blur'}] } The validator in this embodiment does not require defining variables; it only needs to bind custom instructions to form nodes to automatically identify the field titles in the nodes and generate corresponding error messages and trigger methods, as shown below: name: v-required age: v-validate="rule().type('number')" As can be seen, this invention improves efficiency by dynamically generating validation rules using custom classes, eliminating the need to write redundant code such as identical trigger rules for each form. It cleverly uses Vue's custom directives to dynamically bind validation rules to the `rules` property of form items, allowing direct manipulation at the node level without configuring validation in the JavaScript code, saving time. Furthermore, in addition to retrieving the form node, it supports custom titles and custom error messages, offering greater configurability for developers. The inclusion of style adjustments for required fields within the class helps maintain a consistent form style across the project, and batch processing of internationalization within the same class facilitates internationalization maintenance.

[0062] The preferred embodiments of the present invention have been described in detail above. However, the present invention is not limited to the specific details of the above embodiments. Within the scope of the technical concept of the present invention, various equivalent transformations can be made to the technical solutions of the present invention, and these equivalent transformations all fall within the protection scope of the present invention.< / validationprovider>

Claims

1. A form validation method, characterized in that, Includes the following steps: S1. Create a custom class to store and process validation rules. Define a class constructor in the custom class, accept parameters, and define the validation logic and error messages for specific fields. Step S1 further comprises: S11. Create a custom class and define a class constructor in the custom class. The constructor accepts parameters, including field name, field title, trigger mode, required flags, minimum length, maximum length, regular expression, error message, and internationalization function. These parameters are used to define the validation logic and error message for the given field. S12. Define a class property for storing the array of validation rules. This array is initially empty and will be filled by class methods. S2. Define a method getRules in a custom class that returns a set of validation rules based on the received parameters; S3. Create custom instructions, bind them to form nodes, dynamically obtain the field titles on the form nodes, set them as the rules attribute of the form nodes, set the tag attributes of the form nodes, and add style adjustment functions as needed. S4. In the install method of the Vue application, bind the custom directive and custom class to the Vue instance; S5. Edit the verification rules using the custom instructions; Step S3 is as follows: S31. Create a custom instruction, which has one parameter and one value; the parameter is the name of the custom class, and the value is an object containing the parameters of the class constructor. S32. Call the bind hook function and the update hook function, and create an instance of the custom class using the parameters and values ​​in the function; S33. Call the getRules method of the instance to obtain the array of verification rules; S34. Set the rules property of the form node to the obtained array of validation rules, set the label property of the form node to the field title, and add a red asterisk to the field title if the required property of the form node is true. S35. Return to the form node with the properties set.

2. The form validation method according to claim 1, characterized in that, Step S2 is as follows: S21. Create an instance of the custom class based on the name of the custom class and an object containing the class constructor parameters; S22. Call the getRules method of the instance to obtain the array of verification rules based on the received parameters; S23. Return a set of verification rules based on the obtained array of verification rules.

3. The form validation method according to claim 1, characterized in that, Step S4 is as follows: S41. Define the installation method for Vue applications; S42. Use the directive method of a Vue instance to register custom directives globally; S43. Use the prototype property of the Vue instance to globally attach custom classes; S44. Return the Vue instance that has registered custom directives and attached custom classes, and enter it into the installation method of the Vue application.

4. The form validation method according to claim 1, characterized in that, Step S5 is as follows: S51. Edit validation rules using custom directives on form nodes; S52. Repeat step S51 for each form node that requires validation rules; S53. Return to the edited verification rules.

5. The form validation method according to claim 1, characterized in that, Step S5 also includes displaying and handling errors using the VeeValidate component and functions.

6. The form validation method according to claim 1, characterized in that, It also includes adding a method to the custom class in step S2 to get error messages in different language environments.

7. The form validation method according to claim 1, characterized in that, This also includes introducing internationalization plugins in Vue applications and integrating internationalization plugins with custom classes and custom directives.

8. A communication method for a satellite terminal, characterized in that, The form validation method according to any one of claims 1 to 7 includes the following steps: Sa, open a web browser and send an HTTP request to the web server; The Sb and Web server receive the HTTP request and generate an HTML document based on the Web interface; The web browser receives an HTML document, the user enters data in the HTML document, and the client uses the form validation method to validate the data and provide immediate feedback. Sd, the network server receives the input data and performs verification on the server side using the form verification method described above; The Se satellite communication system receives verified data from the network server, converts the verified data, and performs communication services. The Sf network server receives converted data from the satellite communication system and processes it according to the terminal's functions and characteristics.

Images