In this Vue.js tutorial, we will make PHP script for implement username or email live check for registration feature using Vue.js with Axios package for send Ajax request. This functionality is very common and it is required feature for most of the websites which is available online. If in your website, you have give login rights to user by entering their username or email and password, and get access into websites. Then at that time their username or email address must be unique. For this things when user has come into your websites for new account registration, then at that time we have to check username or email is available for registration or not for prevent duplicate registration with same username or email address.
For this problem, In this tutorial, we will use Vue.js with PHP script for check username of email already exists in our Mysql database or not. If Username or email is already exists then at that time we have stop user registration process by displaying message like particular email or username is already registered in our system try with different username or email address, and it will notify to the user regarding email address or username is already used by some another person before submitting of registration form data. Now in your mind one question will arise, how to check email ID or username exist or not in database, for this we will use Ajax with Vue.js and PHP script. When user has type something in username or email textbox then Vue.js will send Ajax request to PHP script with query like for search particular username or email address already exists in Mysql database.
This we can done when User has create account in our website, so while user enters their username or email id then Vue.js will triggered Ajax call and it will send request to PHP script at server side to check the availability status of email address or username. At PHP script, it will matches user data which they have enter with data available in Mysql database and it will send back response to Ajax request with availability of Username or email address which will be display on web page by using Vue.js without refresh of web page. So checking of availability of Email Address or Username of the user at the time registration is the best way to prevent duplicate registration in our web application. So from this tutorial, you can learn how to check email id or username availability of user from database, this things here we will use Ajax with Vue.js and PHP script. Below you can find the complete source code of how to check availability of the username or email address using ajax and Vue.js in PHP.
Source Code
Mysql Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_login`
--
CREATE TABLE `tbl_login` (
`id` int(11) NOT NULL,
`first_name` varchar(100) NOT NULL,
`last_name` varchar(100) NOT NULL,
`gender` varchar(30) NOT NULL,
`email` varchar(200) NOT NULL,
`password` varchar(200) NOT NULL,
`address` text NOT NULL,
`mobile_no` varchar(15) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_login`
--
INSERT INTO `tbl_login` (`id`, `first_name`, `last_name`, `gender`, `email`, `password`, `address`, `mobile_no`) VALUES
(1, 'John', 'Smith', 'male', 'johnsmith@gmail.com', '$2y$10$vgo3NI5w5cLB74E4B2sdVuKwdSpJL/EAeKSUdevkc/j3zl0sJAf5i', 'test address', '9632587410');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_login`
--
ALTER TABLE `tbl_login`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_login`
--
ALTER TABLE `tbl_login`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Live Username Or Email Availability using Vue.js in PHP</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container" id="registerApp">
<br />
<h3 align="center">Live Username Or Email Availability using Vue.js in PHP</h3>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Register</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label>Enter Your Email</label>
<input type="text" v-model="email" class="form-control input-lg" :class="class_name" @keyup="check()" />
<span :class="[dynamic_class ? 'success' : 'danger']">{{ message }}</span>
</div>
<div class="form-group">
<label>Enter Your Password</label>
<input type="password" v-model="password" class="form-control input-lg" />
</div>
<div class="form-group" align="center">
<button type="button" :disabled="is_disable" class="btn btn-info btn-lg">Register</button>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
.success
{
font-weight: bold;
color:#009933;
background-color: #ccffcc;
border:1px solid #009933;
}
.danger
{
font-weight: bold;
color:#ff0000;
background-color: #ffe6e6;
border:1px solid #ff0000;
}
</style>
<script>
var application = new Vue({
el:'#registerApp',
data:{
email:'',
dynamic_class:true,
message:'',
password:'',
is_disable:false,
class_name:''
},
methods:{
check:function(){
var email = application.email.trim();
if(email.length > 2)
{
axios.post('action.php', {
email:email
}).then(function(response){
if(response.data.is_available == 'yes')
{
application.dynamic_class = true;
application.message = 'This Email is Available for Registration';
application.is_disable = false;
application.class_name = 'success';
}
else
{
application.dynamic_class = false;
application.message = 'This Email is already registred';
application.is_disable = true;
application.class_name = 'danger';
}
});
}
else
{
application.message = '';
application.class_name = '';
application.dynamic_class = true;
application.is_disable = false;
}
}
}
});
</script>
action.php
<?php
//action.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$received_data = json_decode(file_get_contents("php://input"));
$data = array();
if($received_data->email != '')
{
$is_available = 'yes';
$query = "
SELECT * FROM tbl_login
WHERE email = '".$received_data->email."'
";
$statement = $connect->prepare($query);
$statement->execute();
$total_row = $statement->rowCount();
if($total_row > 0)
{
$is_available = 'no';
}
$data = array(
'is_available' => $is_available
);
}
echo json_encode($data);
?>
If you like this tutorial and you have found that this tutorial helpful then please don't forget to share this tutorial.
