❤ vue uses native components

❤ vue uses native components

1. Make an input input box to verify the start

① If we want our input box type to be time, we only need to simply add a type type to our input box

<input type="date" id="birthday" name="birthday" placeholder="年/月/日">

我们还可以拿正则验证非空
    
var reg_birthday = /^\d{4}\/\d{2}\/\d{2}$/;

② But what if we want to enter the validation type:

//Verify user name method (can only be alphanumeric and Chinese, cannot include special characters)

 var regex = /^[0-9a-zA-Z\u4e00-\u9fa5]*$/;
  
  if(regex.test(value) == true){
    
    }
  else{
    
    }

Common Properties and Methods

• disabledSpecify whether to disable the input component through the attribute

• Use clearableattributes to get a clearable input box

• Use show-passwordattributes to get a switchable display and hidden password box

• Add display icons at the head and tail of input components through prefix-iconand suffix-iconattributes, or place icons through slots

Use as follows:

<el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1"> </el-input>

• type="textarea"Convert to a text-type input box by adding type

• Setting autosizethe property allows the height of the text field to be automatically adjusted according to the text content, and autosizecan also be set as an object to specify the minimum and maximum number of lines.

• Specify the size of the input box through sizethe attribute, in addition to the default size, it also provides three sizes of medium, small and mini

• maxlengthand minlengthare native attributes, which are used to limit the character length of the input box, where the character length is counted by the string length of Javascript. For an input box of type textor textarea, while using maxlengththe attribute to limit the maximum input length, you can set show-word-limitthe attribute to display word count

• Want to count the number of words: use show-word-limit to achieve the effect of limiting text